Подтвердить что ты не робот

Вложение класса контейнера внутри класса контейнер-жидкость в Bootstrap 3?

Помимо проблемы с заполнением, почему не рекомендуется встраивать контейнер .container-fluid?

Если вы ноль заполнения дочернего контейнера (как показано в моем коде ниже), эффект будет таким же, как и один контейнер. Кроме того, похоже, что в эти дни довольно разная полная и фиксированная ширина. Я знаю, что говорит документация (LINK), но мне любопытно, знает ли кто-нибудь о чем-либо кроме проблемы с заполнением, которая гарантирует, что эта реализация не рекомендуется, Это дополнительная разметка или что-то еще, что мне не хватает?

Причина, по которой я спрашиваю, это то, что я недавно реализовал это на нескольких сайтах и ​​не видел никаких явных проблем с ним в тестировании, которое я сделал. Мне интересно, есть ли какая-то другая потенциальная проблема (проблемы), которая могла бы послужить причиной для рассмотрения этой практики.

CSS

.container-fluid .container {
    padding-left:0;
    padding-right:0;
}

HTML

<div class="container-fluid" style="background-color:aliceblue;">
    <div class="row">
        <div class="col-xs-12">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                    <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                </div>
            </div> 
        </div>
    </div>
    <div class="row">
      <div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
    </div>
</div>

Пример использования Bootply

4b9b3361

ОТВЕТЫ

Ответ 1

После изучения этой проблемы, я думаю, у меня есть хороший ответ на этот вопрос. Исходя из того, что я нашел, похоже, что Документация по Bootstrap и на веб-сайте Bootstrap противоречат что классы контейнера не могут быть вложенными. Это подтверждено в репо. Похоже, что рекомендация в документации о контейнерах вложенности и проблема с добавлением, вызванная вложенными контейнерами, является единственной реальной проблемой этой проблемы, так как я не обнаружил никаких других проблем с ней.

В репо я нашел другое потенциальное решение, которое рекомендовало изменить поля на вложенных контейнерах. Но я думаю, что мое решение об отказе от заполнения дочернего контейнера, как описано в этом первоначальном вопросе, немного более практично и прямолинейно, поскольку для достижения желаемого эффекта дополнительной разметки не требуется. Я буду включать решение по полям из репо здесь для справки. В основном это связано с добавлением фиксированного класса в родительский контейнер, а затем применения отрицательного поля слева и справа на каждом вложенном контейнере в родительском. Обратите внимание, что это решение не применяется к экземплярам контейнеров, вложенных в контейнер-жидкость. Только для контейнеров, вложенных в другие контейнеры.

КОНТЕЙНЕРЫ, ЗАПРЕЩЕННЫЕ В КОНТЕЙНЕРАХ

HTML

<div class="container fixed">
  <div class="container">
    <div class="container">
      <div class="container"></div>
    </div>
  </div>
</div>

CSS

.container.fixed .container {
    margin-left: -15px;
    margin-right: -15px;
}

Пример использования Bootply

КОНТЕЙНЕРЫ, ЗАПРЕЩЕННЫЕ В КОНТЕЙНЕРНО-ЖИДКОСТИ

CSS

.container-fluid .container {
    padding-left:0;
    padding-right:0;
}

HTML

<div class="container-fluid" style="background-color:aliceblue;">
    <div class="row">
        <div class="col-xs-12">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                    <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                </div>
            </div> 
        </div>
    </div>
    <div class="row">
      <div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
    </div>
</div>

Пример использования Bootply

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