Как я могу сделать так, чтобы бутстрап 4 желоба столбцов равнялся заполнению контейнера? - PullRequest
Новая
       0

Как я могу сделать так, чтобы бутстрап 4 желоба столбцов равнялся заполнению контейнера?

0 голосов
/ 29 сентября 2018

В настоящее время я использую загрузчик 4. В моем коде разрыв между двумя элементами (.items) составляет 30 пикселей из-за заполнения начальных строк двумя столбцами.Но контейнер имеет отступ 15px.Я думаю, что если бы промежуток между двумя элементами был 15px, что равно заполнению контейнера, было бы лучше.Как я могу это сделать?

  <head>
    <meta charset="utf-8">	
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel = 'stylesheet' href = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'/>
 
  </head>
  
  <body>
 <div class="container-fluid">
     <div class="row">
   <div class = 'col-sm'>
     <div class = 'bg-primary items'>A</div>
   </div>
   <div class = 'col-sm'>
     <div class = 'bg-success items'>B</div>
   </div>
   <div class = 'col-sm'>
     <div class = 'bg-info items'>C</div>
   </div>
  </div>
 </div>


  </body>

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

Вы можете просто удалить заполнение из среднего столбца, используя px-0 ... 

<div class="container-fluid border">
    <div class="row">
        <div class="col-sm">
            <div class="bg-primary items">A</div>
        </div>
        <div class="col-sm px-0">
            <div class="bg-success items">B</div>
        </div>
        <div class="col-sm">
            <div class="bg-info items">C</div>
        </div>
    </div>
</div>

Или используйте специальный класс CSS для переопределения Bootstrap'sжелоб (= 7,5 пикселей) ... 

.p-row-sm {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.p-row-sm > div[class^="col"] {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

Демонстрация: https://www.codeply.com/go/SZcY3X4hTY

0 голосов
/ 29 сентября 2018
* Заполнение

30px означает, что оно будет разделено на отступы 15px влево и 15px для div.Таким образом, происходит добавление отступа 15 пикселей от первого (отступ справа) и второго div (отступ слева) в центре.Итак, вот решение: 

    div class="container-fluid">
     <div class="row">
   <div class = 'col-sm'>
     <div class = 'bg-primary items'>A</div>
   </div>
   <div class = 'pl-0 col-sm'>
     <div class = ' bg-success items'>B</div>
   </div>
   <div class = ' pl-0 col-sm'>
     <div class = ' bg-info items'>C</div>
   </div>
  </div>
 </div>

Это то, что я изменил: добавлен класс начальной загрузки pl-0 во второй и третий div.Надеюсь, что это работает!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...