Bootstrap: полноразмерная сетка со столбцами в контейнере

Я хочу создать макет полной ширины с синей половиной слева и красной половиной справа.

После этого я хочу добавить текст внутри макета, но внутри контейнера.

Это возможно?

РЕДАКТИРОВАТЬ: вы можете видеть, что зеленый контейнер имеет другой размер, чем col-6 внутри синей и красной половины.

* {
  color: white;
}
.blue-half {
  background: blue;
}
.red-half {
  background: red;
}
.green {
  background: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container green">
  I am the normal container!
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the blue container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the red container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


css twitter-bootstrap bootstrap-4 twitter-bootstrap-3 grid
person Cray    schedule 16.09.2016    source источник
comment
Вот что я читаю: я хочу, чтобы зеленый контейнер взял первую половину, а вторую половину нужно разделить пополам (то есть на четверти), а затем эти половины разделить пополам. Если это не совсем правильно, то, возможно, создайте изображение нужного макета и используйте его в качестве примера?   -  person willwolfram18    schedule 16.09.2016
comment
Что-то вроде этого (синий раздел Кто мы): stripe.com/about — фон двух полуколонок должен быть полной ширины, а содержимое должно иметь ту же ширину, что и обычные контейнеры в начальной загрузке.   -  person Cray    schedule 16.09.2016
comment
Это так же просто, как заменить container-fluid на container и использовать col-*-12 внутри синей/красной половины. Я обновлю свой ответ соответствующим образом   -  person willwolfram18    schedule 16.09.2016

Ответы (4)


arrow_upward
3
arrow_downward

Вариант 2. Разделить емкость на две части

Вы можете определить новый класс для каждой половины контейнера. Но в этом решении вам нужно контролировать, чтобы две половины имели одинаковую высоту.

.blue { background: blue; color: white; }
.red  { background: red;  color: white; }

.container-left-half,
.container-right-half {
  padding-right: 15px;
  padding-left: 15px;
}
.container-left-half {
  margin-right: 0;
  margin-left: auto;
}
.container-right-half {
  margin-right: auto;
  margin-left: 0;
}
@media (min-width: 768px) {
  .container-left-half,
  .container-right-half {
    width: 375px;
  }
}
@media (min-width: 992px) {
  .container-left-half,
  .container-right-half {
    width: 485px;
  }
}
@media (min-width: 1200px) {
  .container-left-half,
  .container-right-half {
    width: 585px;
  }
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 blue">
      <div class="container-left-half">
        <div class="row">
          <div class="col-xs-12">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 red">
      <div class="container-right-half">
        <div class="row">
          <div class="col-xs-12">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
        </div>
      </div>
    </div>
  </div>
</div>

Вариант 1. Линейно-градиентный и матрешка

1) Вы можете использовать функцию linear-gradient(), чтобы двухцветный фон.

2) Bootstrap имеет строки и два типа контейнеров:

Используйте .container для адаптивного контейнера с фиксированной шириной.

Используйте .container-fluid для контейнера полной ширины, охватывающего всю ширину окна просмотра.

Строки должны быть размещены в пределах .container (фиксированная ширина) или .container-fluid (полная ширина) для правильного выравнивания и заполнения.

3) Так можно сделать матрешку:
.container-fluid > .row with linear-gradient > .container > .row with content

Матрешка представляет собой набор ярко раскрашенных полых деревянных кукол разного размера, предназначенных для вложения друг в друга.

матрешка

4) col-xs-6 эквивалентно col-xs-6 col-sm-6 col-md-6 col-lg-6.

.two-colors {
  background: linear-gradient(to right, blue 50%, red 50%);
  color: white;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row two-colors">
    <div class="container">
      <div class="row">
        <div class="col-xs-6">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
        <div class="col-xs-6">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
      </div>
    </div>
  </div>
</div>

person Gleb Kemarsky    schedule 17.09.2016
comment
Спасибо за помощь. Идея с линейным градиентом хороша. Я надеялся, что будет решение без трюков с CSS. В этой версии я мог использовать только цвета фона и не использовать изображения. - person Cray; 18.09.2016
comment
@Simon Я добавил второй вариант. Пожалуйста, проверьте. - person Gleb Kemarsky; 18.09.2016

arrow_upward
2
arrow_downward

Попробуй это

<div class="container-fluid">
 <div class="row">
    <div class="col-xs-6 blue">
        <div class="container">
            <!--content-->
        </div>
    </div>
    <div class="col-xs-6 red">
        <div class="container">
            <!--content-->
        </div>
    </div>
 </div>

CSS

  .red{
    background: red;
   }
  .blue{
    background: blue;
  }
person Damian Dominella    schedule 16.09.2016
comment
Блин, кто-то меня всегда обгоняет! - person willwolfram18; 16.09.2016
comment
Спасибо за вашу помощь. Но это не совсем то, что я имел в виду. Теперь содержимое находится в контейнере внутри столбцов. Что мне нужно, так это содержимое обоих столбцов, объединенное по ширине контейнера (в центре макета). Например: размер экрана составляет 3000 пикселей по ширине. Каждый столбец (синий и красный). имеет ширину 1500px. Теперь мне нужен контейнер с размером 1140px в центре макета и двумя столбцами col-6 внутри. Надеюсь, вы понимаете, что я пытаюсь сказать :) - person Cray; 16.09.2016
comment
Я не совсем уверен, что вы спрашиваете. Основываясь на вашем комментарии, я читаю, что вам нужны два основных столбца, красный и синий, а затем в этих столбцах центрируется содержимое, и это содержимое также разделено пополам, то есть еще два столбца внутри синего содержимого и красного содержимого. Это правильно? - person willwolfram18; 16.09.2016
comment
Я обновил свой ответ, чтобы отразить то, что я понял из вашего замечания. Дайте мне знать, если это то, что вы описываете - person willwolfram18; 16.09.2016

arrow_upward
2
arrow_downward

Что-то вроде этого?

* { color: white; }

.blue-half {
  background: blue;
}

.red-half {
  background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the blue container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the red container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Обновить Я попытался создать то, что я читал из вашего комментария, переформатировав не совсем правильное форматирование.

Обновление 2

.row-green {
  background: green;
  color: white;
}
.blue-half {
  background: blue;
  color: white;
}

.red-half {
  background: red;
  color: white;
}

.option1 .row .container {
  padding: 0;
}

.option2 .container.unindent {
  padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid option1">
  <h3>Option 1</h3>
  <p>
    This uses a .row .container selector rule to enforece the padding removal on containers nested in rows.
  </p>
  <div class="row row-green">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      I am the row above!
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid option2">
  <h3>Option 2</h3>
  <p>
    This uses an unindent CSS class on the containers that need to have the padding removed
  </p>
  <div class="row row-green">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      I am the row above!
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container unindent">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container unindent">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

person willwolfram18    schedule 16.09.2016
comment
большое спасибо! Но, как я написал в комментарии к ответу Дамиана, это не совсем то, что я имел в виду. Извините, возможно, мой вопрос был немного неясен. - person Cray; 16.09.2016
comment
еще раз спасибо. Я также добавил пример кода в свой вопрос. Вы можете видеть, что начало содержимого находится не на той же строке, что и в зеленом контейнере. это то, чего я пытаюсь достичь - person Cray; 16.09.2016
comment
Итак, вы хотите, чтобы обычный контейнер находился на одной линии с красным и синим полуконтейнерами? - person willwolfram18; 16.09.2016
comment
Я действительно ценю твою помощь. но результат все равно не тот, что я имел в виду. извините :( текст в зеленом контейнере не выровнен с текстом в синем контейнере. - person Cray; 16.09.2016
comment
В этот момент речь идет о настройке заполнения. Я обновлю образец для вас двумя вариантами - person willwolfram18; 16.09.2016
comment
Хорошо, но разве это не всегда будет неточно, если я отрегулирую отступы? Я также нашел еще один пример: www.getpushforms.com - это похоже на загрузку, но я еще этого не понимаю. - person Cray; 16.09.2016
comment
Настройка отступов не должна вызывать каких-либо серьезных проблем, если ваши селекторы CSS достаточно специфичны, чтобы выбирать ТОЛЬКО элементы, которые необходимо настроить, а не все элементы. - person willwolfram18; 16.09.2016
comment
хм, но теперь это все еще не в ширину контейнера. вместо этого содержимое также полноразмерное. Возможно, мой вопрос был непонятен. Я попробовал еще раз сам или должен уточнить, что мне нужно. еще раз спасибо!! - person Cray; 16.09.2016

arrow_upward
1
arrow_downward

Попробуй это:

  <div class="container">
    <div class="row">
      <div class="col-md-6">Left Column</div>
      <div class="col-md-6 col-expand">Right Column</div>
    </div>
  </div>

CSS:

.col-expand {
    position: absolute;
    background-color: orange;
    width: 100%;
    right: 0px;
}
person SlavisaPetkovic    schedule 22.05.2019