Загрузочный столбец Bootstrap xs

Question

Для наименьшего размера xs, даже если у меня есть столбцы с добавлением до 12, они не работают должным образом, если ширина экрана уменьшается до определенного предела. Например: -

<div class="container"> 
    <div class="row"> 
      <div class="col-xs-2"> 
      </div> 
      <div class="col-xs-1 col-xs-offset-8> 
      </div> 
      <div class="col-xs-1> 
      </div> 
    </div> 

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

Answer 1

Это известная проблема: https://github.com/twbs/bootstrap/issues/13221

на экран шириной < 360 пикселей, то столбцы .col-xs-1 начинают обернуть, потому что ..

«в то время как столбец устанавливается ширина: 8.333333% , столбец будет иметь ширину не менее 30 пикселей из-за обивки 15px с обеих сторон. Следовательно, есть рассогласование, а браузер только укладывает столбцы "- @mdo

Проблем можно избежать, не используя col-xs-1 на очень маленьких экранах. Вы также должны рассмотреть, будет ли экран реалистично изменен менее чем на 360 пикселей. В большинстве случаев это не так.

Answer 2

Это хорошо работает для меня. Но в вашем коде не хватает закрывающего div и нескольких кавычек.

<div class="container"> 
<div class="row"> 
    <div class="col-xs-2"> 
    </div> 
    <div class="col-xs-1 col-xs-offset-8"> 
    </div> 
    <div class="col-xs-1"> 
    </div> 
</div> 
</div>