Столбы бутстрапов не работают должным образом

Question

Строки и столбцы бутстрапов не отображаются должным образом на телефонах и других небольших устройствах.

Скриншот на мобильном устройстве

.

Для планшетов и больших дисплеев это работает правильно.

Код

<div class="col-xs-5 col-sm-1"><i class="fa fa-mobile" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-3">ww</div> 
    <div class="col-xs-5 col-sm-1"><i class="fa fa-envelope-o" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-3">ww</div> 
    <div class="col-xs-5 col-sm-1"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-3">ww</div> 

Я сделал временное решение - я установить такую ​​же высоту для этих див. Но я не думаю, что это будет всегда хорошее решение.

После временного исправление (выравнивает добавлено рис ниже)

Как решить эту проблему в лучше пути?

Answer 1

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

<div class="clearfix"> 

Вы вставляете его между элементами, которые будут разбиваться на новую строку в определенной точке останова. Итак, в вашем случае, после первых двух «ww» divs для вашей контрольной точки xs.

только иметь это повлияет на ваши хз останова мы добавим еще один Bootstrap вспомогательный класс:

<div class="clearfix visible-xs"> 

Более подробную информацию об этих вспомогательных классов можно найти в документации Bootstrap:
Clearfix, Visibility Classes

Full пример:

i { 
 
    font-size: 30px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="col-xs-5 col-sm-1"><i class="fa fa-mobile" aria-hidden="true"></i> 
 
</div> 
 
<div class="col-xs-7 col-sm-3">ww</div> 
 
<div class="clearfix visible-xs"></div> 
 

 
<div class="col-xs-5 col-sm-1"><i class="fa fa-envelope-o" aria-hidden="true"></i> 
 
</div> 
 
<div class="col-xs-7 col-sm-3">ww</div> 
 
<div class="clearfix visible-xs"></div> 
 

 
<div class="col-xs-5 col-sm-1"><i class="fa fa-map-marker" aria-hidden="true"></i> 
 
</div> 
 
<div class="col-xs-7 col-sm-3">ww</div>

Answer 2

Чтобы получить правильную выгоду от бутстрапа, вы должны приложить каждую из 12 столбцов сетки в div row. Например,

<div class="row"> 
    <div class="col-xs-5 col-sm-5"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
    <div class="col-xs-7 col-sm-7">ww</div> 
</div> 

Answer 3

Вам необходимо обернуть каждую из этих групп столбцов в 12 строк столбцов. Ваши колонки должны добавить до 12 в каждой строке для каждой точки останова, для которой вы добавляете класс. Если вы не обернете их каждый подряд, они будут автоматически обертываться после 12 столбцов, но вам нужно убедиться, что cols, который вы хотите в одной строке, всегда добавляет до 12.

т.е.

<div class="row> 
    <div class="col-xs-7 col-sm-9">ww</div> 
    <div class="col-xs-5 col-sm-3"><i class="fa fa-mobile" aria-hidden="true"></i></div> 
</div> 
<div class="row> 
    <div class="col-xs-7 col-sm-9">ww</div> 
    <div class="col-xs-5 col-sm-3"><i class="fa fa-envelope-o" aria-hidden="true"></i></div> 
</div> 
<div class="row> 
    <div class="col-xs-7 col-sm-3">ww</div> 
    <div class="col-xs-5 col-sm-9"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
</div> 

Это также будет работать с немного меньшим контролем макета (но вам нужно определить все точки останова - не просто маленький и XS в классах).

<div class="row> 
    <div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div> 
    <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-mobile" aria-hidden="true"></i></div> 

    <div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div> 
    <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-envelope-o" aria-hidden="true"></i></div> 

    <div class="col-xs-7 col-sm-9 col-md-9 col-lg-9">ww</div> 
    <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
</div>