Bootstrap/CSS - why is .clearfix необходимо здесь

Question

У меня возникла проблема при попытке разместить некоторые элементы <input/> в фиксированной позиции DIV с Bootstrap 3. Казалось, что контейнер DIV увеличился в ширину, чтобы разместить входы (которые были внутри контейнеров col-*) без видимых причин. Вот демонстрационный код:

<div class="dropdown-menu" style="top: 10px; left: 400px; position: fixed; display: block;"> 
     <div class="col-xs-12"> 
     <div class="col-xs-12"> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="0">Bark</label> 
      </div> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="1">Roll over</label> 
      </div> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="2">Find bone and bury it underground</label> 
      </div> 
     </div> 
     <div class="col-xs-12 whyyyyyyyyyyyyyyyyyyyyyy"> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
     </div> 
     </div> 
    </div> 

Это как выше выглядит с:

И это без входов:

После проверки ширины и min-widths, я обнаружил, что только с использованием .clearfix между всеми элементами col-* фиксированными t он проблема, вот так:

<div class="dropdown-menu" style="top: 10px; left: 400px; position: fixed; display: block;"> 
     <div class="col-xs-12"> 
     <div class="col-xs-12"> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="0">Bark</label> 
      </div> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="1">Roll over</label> 
      </div> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="2">Find bone and bury it underground</label> 
      </div> 
     </div> 
     <i class="clearfix" /> 
     <div class="col-xs-12 whyyyyyyyyyyyyyyyyyyyyyy"> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <i class="clearfix" /> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <i class="clearfix" /> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <i class="clearfix" /> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
     </div> 
     </div> 
    </div> 

Вот как выглядит выше:

Один из этих .clearfix -es пропавшими без вести, и я получаю страшные размеры контейнера.

Я попытался обратиться к теории, прочитав около .clearfix, например. отсюда: https://stackoverflow.com/a/9543569/964053 но, опять, не вижу что .clearfix меняется в этом случае.

Я имею в виду, что все элементы/содержимое в моем случае уже плавающие. Почему контейнер растет так и как .clearfix удается его исправить? В ответном ответе указывается floats do not impart shape to its container и What clearfix does is to force content after the floats or the container containing the floats to render below it. Если в моем случае сами плавающие элементы не приводят к росту контейнера, что делает этот взлом? Пространства между ними?

Есть ли лучшее решение для этого, чем использование элементов clearfix повсюду?

UPDATE:

Хм ... Кажется, что-то недействительна в HTML моего кода решения во 2-й фрагмент кода. Это само закрывающиеся элементы <i>. Это было исправление проблемы в Bootply, но не за ее пределами. Вот то, что я получал в Bootply:

Хм ... Так что, я думаю, что я до сих пор нет никакого решения этого (по крайней мере, не тот, который требует хаки). Любые идеи о том, как решить эту проблему?

Answer 1

Общая ширина контейнера input составляет col-xs-12. Поэтому они попытаются использовать это 12-ти столбцовое пространство. Таким образом, вы можете использовать меньшую седловину - * - # на родителе:

<div class="col-xs-6"> 
    <div class="col-xs-3"> 
    <input class="form-control" /> 
    </div> 
    <div class="col-xs-3"> 
    <input class="form-control" /> 
    </div> 
    <div class="col-xs-3"> 
    <input class="form-control" /> 
    </div> 
    <div class="col-xs-3"> 
    <input class="form-control" /> 
    </div> 
</div> 

Однако, вы могли бы иметь большую проблему в том, как ваши колонки настроены. Например, столбец col-xs-12 как прямой потомок другого col-xs-12 является избыточным. Вы также должны использовать контейнеры .row.

См. boostrap documentation на сетках.

Кроме того, никогда не обернуть блоковые элементы уровня, как <div> с строчными элементами, как <i>если их свойство отображения не установлен на inline-block или block. Или ваша страница будет отображаться с неожиданными результатами.