Удалить расстояние между колоннами

Я хочу удалить пробел между несколькими столбцами в сетке Bootstrap.

Как мы можем перезаписать Bootstrap CSS для достижения этой задачи или любого другого лучшего решения с чистым CSS?

main.html

<div class="row">
  <div class="col-md-2">
    // stuff here for this column
  </div>
  <div class="col-md-10">
    // stuff here for columns
  </div>
</div>

ОТВЕТЫ

Ответ 1

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

.padding-0{
    padding-right:0;
    padding-left:0;
}

в html напишите этот класс

<div class="row">
   <div class="col-md-2 padding-0">
       //stuff here for this column
   </div>
   <div class="col-md-10 padding-0">
       //stuff here for columns
   </div>
</div>

Ответ 2

Вы можете создать класс no-gutter для своего row и удалить поле/дополнение, добавленное бутстрапом, как это предлагается в этом сообщении:

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}
.row > div {
  background: lightgrey;
  border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutter">
  <div class="col-md-2">
    1
  </div>
  <div class="col-md-10">
    2
  </div>
</div>

Ответ 3

В Bootstrap 4 включен класс no-gutters. Никакой дополнительный CSS не нужен...

<div class="row no-gutters">
  <div class="col-md-2">
    // stuff here for this column
  </div>
  <div class="col-md-10">
    // stuff here for columns
  </div>
</div>

Ответ 4

В Bootstrap 4 вы можете добавить класс mx-* и px-*

<div class="row mx-0">
    <div class="col-md-6 px-0">
        <p>Your content</p>
    </div>
    <div class="col-md-6 px-0">
        <p>Your content</p>
    </div>
</div>

Классы mx-* и px-* находятся в стиле начальной загрузки, поэтому вам не нужно добавлять его вручную

mx-* margin-right: * plus margin-left: *. В то время как px-* обозначает px-* справа и слева.

Также имеется my-* m-* mt-* mb-* mr-* ml-* и py-* p-* pt-* pb-* pr-* pl-*.

Ответ 5

В столбцах есть 15px дополнение с обеих сторон, если вы удалите их, они должны сидеть вместе.

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 0px;
    padding-left: 0px;
}

Этот фрагмент кода выполнен из измененного кода, найденного в grid-framework.less.

Ответ 6

Я бы добавил класс в строку и задал значение для столбца с помощью селектора шаблонов потомков:

HTML:

<div class="row nopadding">
    <div class="col-md-2">
        //stuff here for this column
    </div>
    <div class="col-md-10">
        //stuff here for columns
    </div>
</div>

CSS

.nopadding > div[class^="col-"] {
    padding-right: 0;
    padding-left: 0;
}

Ответ 7

Если вы используете LESS, вы можете использовать фрагмент и применить его к строке.

.no-gutter {
   [class*="col-"] {
       padding-left: 0 !important;
       padding-right: 0 !important;
   }
}

Если обычный CSS

.no-gutter > [class*="col-"]{
}

Так же:

<div class="row no-gutter">
  <div class="col-md-2">
   //stuff here for this column
  </div>
  <div class="col-md-10">
   //stuff here for columns
  </div>
</div>

Ответ 8

Решение Anshuman действительно работает! Он избавляется от пространств столбцов бутстрапа, когда вы устанавливаете отступы в ноль в стилях, т.е. Заполнение: 0;

<div class = "row">
  <div class = "col-sm-3" style= "padding:0;">
    //html code here..
  </div>
  <div class = "col-sm-3" style= "padding:0;">
    //html code here..
  </div>
</div>

Ответ 10

<div class="row">
    <div class="col-md-2" style="padding:0">
        //stuff here for this column
    </div>
    <div class="col-md-10" style="padding:0">
        //stuff here for columns
    </div>
</div>