Правильное использование сетки Bootstrap

Я учусь использовать BootStrap, и мне очень нравится идея этого. Однако я наткнулся на проблему, я не могу понять, как ее решить. (Я попытался найти ответ, попробовал несколько версий - не работал).Правильное использование сетки Bootstrap

На самом деле это не так сложно, поэтому я расстроен. Так вот оно.

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

<div class="row" style="padding-top: 54px;"> 
    <div class="col-md-4"> 
     <div class="about-why-texts"> 
      <img src="img/icon-check.png" /> 
      <div>Telegram deposit system</div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="about-why-texts"> 
      <img src="img/icon-check.png" /> 
      <div>Safe and secured website</div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="about-why-texts"> 
      <img src="img/icon-check.png" /> 
      <div>Automated withdrawal system</div> 
     </div> 
    </div>         
</div>

Теперь при уменьшении ширины экрана, они остаются такими же, как 1000ton камень. Я хочу, чтобы они перемещались в 3 новых строках, когда экран уменьшался.

Может ли кто-нибудь научить меня, что я делаю неправильно, и как я могу это исправить.

Огромное спасибо, Марек.

источник

2017-01-07 Marex

.border{ 
 
    border:thin black solid; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="row text-center" style="padding-top: 54px;"> 
 
           <div class="col-md-4 col-xs-12 border"> 
 
            <div class="about-why-texts"> 
 
             <img src="img/icon-check.png" /> 
 
             <div>Telegram deposit system</div> 
 
            </div> 
 
           </div> 
 
           <div class="col-md-4 col-xs-12 border"> 
 
            <div class="about-why-texts"> 
 
             <img src="img/icon-check.png" /> 
 
             <div>Safe and secured website</div> 
 
            </div> 
 
           </div> 
 
           <div class="col-md-4 col-xs-12 border"> 
 
            <div class="about-why-texts"> 
 
             <img src="img/icon-check.png" /> 
 
             <div>Automated withdrawal system</div> 
 
            </div> 
 
           </div>         
 
          </div>

Это то же самое, что вы ищете?

Вот JSFiddle

Надеется, что это помогает.

источник

2017-01-07 05:48:11

, если '' xs' и sm' имеют одинаковую ширину, вам нужно только указать меньший (как это относится к большим размерам, если не указано иное) - так что для меньше кода писать/поддерживать, вы *** только *** нужно 'class =" col-md-4 col-xs-12' – ochi

да .. согласитесь. спасибо за это. :) –

Огромное спасибо! Это то, что мне было нужно.Более того, теперь я понимаю, как это работает, и в чем проблема, сделав дополнительное чтение в BStrap Docs :) – Marex

Возможно, вы сделали некоторые ошибки в своем html, которые не подходят для исправления использования бутстрапа, и это не имеет никакого отношения к text-center, если вы не спросите, чего вы не смогли получить.

Скопируйте ниже HTML-код, чтобы начать работу с минимальным документом Bootstrap.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

Далее вы должны использовать загрузочный контейнер, чтобы обернуть содержимое страницы:

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

Использовать .container для чувствительного контейнера с фиксированной шириной.

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

Использования .container-fluid для полной ширины контейнера, охватывающий всю ширину вашего просмотра.

<div class="container-fluid"> 
    ... 
</div>

источник

2017-01-07 08:58:38 Banzay

Благодарим за информацию! Однако у меня есть класс .container, его просто не включен в код, который я показал. – Marex

Правильное использование сетки Bootstrap

ответ

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