Как использовать вложенные сетки в Bootstrap 4 с flexbox

Я использую Bootstrap 4 CSS с flexbox, и у меня возникают проблемы с вложенными сетками. Гнездовая сетка работает так, как ожидалось, в Bootstrap 4 без flexbox, но когда flexbox используется, стек элементов вместо того, чтобы организовывать себя по горизонтали. Этот код:Как использовать вложенные сетки в Bootstrap 4 с flexbox

<main class="container-fluid"> 
    <form novalidate> 
     <div class="row"> 
      <div class="col-md-6 col-xs-12"> 
       <fieldset class="form-group"> 
        <label>Single input</label> 
        <div class="input-group input-group-sm"> 
         <span class="input-group-addon">1</span> 
         <input type="text" class="form-control" placeholder="100%"> 
        </div> 
       </fieldset> 
      </div> 
      <div class="col-md-6 col-xs-12"> 
       <fieldset class="form-group row"> 
        <div class="col-md-6"> 
         <label>Double Input 1</label> 
         <input type="text" class="form-control" placeholder="50%"> 
        </div> 
        <div class="col-md-6"> 
         <label>Double Input 2</label> 
         <input type="text" class="form-control" placeholder="50%"> 
        </div> 
       </fieldset> 
      </div> 
     </div> 
    </form> 
</main>

Создает this view.

EDIT: Как ни странно, если бы я изменить fieldsets во второй колонке дивы, макет работает, как ожидалось. Однако я не мог найти сколько-нибудь значимых css-различий между полями и divs, кроме вычисленных высот элементов. Что это за полевой набор, который разбивает макет?

К сожалению, я не могу создать jsfiddle, так как версия Bootstrap 4 css, доступная через cdn, не поддерживает flexbox.

источник

2016-06-27 jesse501

Можете ли вы использовать свой код на [jsfiddle] (https://jsfiddle.net/)? –

Вот код с бутстрапом 4 flexbox: http://codeply.com/go/vGxXpLucjT BS 4 все еще находится в альфе, поэтому есть еще много проблем. Вам нужно использовать fieldset? – ZimSystem

Спасибо за то, что вместе, @Skelly! Мне не нужно использовать fieldset, но он и семантический, и поставляется с несколькими полезными стилями в бутстрапе. Мне просто хотелось бы узнать, какая разница между полем и div/span/многими другими, что заставляет его размещать столбцы вертикально, а не горизонтально. – jesse501

Ваш внутренний следующий .row находится в теге <fieldset>.

В наборах полей TWBS заданы их значения 0, а строка классы установлены слева/справа на -15px. В комбинации вы используете перерывы расположение и столбец таким образом обертываются.

Попробуйте гнездо в отдельном .row<div>, вот так.

<!-- does not work --> 
<fieldset class="form-group row"> 
    ... 
</fieldset> 


<!-- better solution --> 
<div class="row"> 
    <fieldset class="form-group"> 
    .. 
    </fieldset> 
</div>

источник

2016-07-03 00:22:08 Vino

В бутстрапе 4 элементы имеют правое/левое поле -0.9375rem. Если вы проверите элементы fieldset.row в кодеписе, вы заметите, что они действительно имеют правильные отрицательные поля, поэтому я не думаю, что это причина. – jesse501

Как использовать вложенные сетки в Bootstrap 4 с flexbox

ответ

Смежные вопросы