Бутстрап 3 сетка без зазора

Ответ 1

Сетка в Bootstrap 3 требует немного поперечного сдвига в вашем мышлении из Bootstrap 2. Столбец в BS2 (col-*) НЕ является синонимом столбца в BS3 (col-sm-* и т.д.), но там является способом достижения того же результата.

Посмотрите это обновление на свою скрипту: http://jsfiddle.net/pjBzY/22/ (код скопирован ниже).

Прежде всего, вам не нужно указывать col для каждого размера экрана, если вы хотите использовать колонки 50/50 любого размера. col-sm-6 применяется не только к маленьким экранам, но и к средним и большим значениям, т.е. class="col-sm-6 col-md-6" является избыточным (преимущество приходит, если вы хотите изменить ширину столбцов на экранах разного размера, например col-sm-6 col-md-8).

Что касается проблемы с полями, то отрицательные поля обеспечивают способ выравнивания блоков текста более гибким способом, чем это возможно в BS2. В jsfiddle вы заметите, что текст в первом столбце визуально выравнивается с текстом в абзаце вне row - за исключением размеров окна "xs", где столбцы не применяются.

Если вам нужно поведение ближе к тому, что у вас было на BS2, где есть пробел между каждым столбцом и нет визуальных отрицательных полей, вам нужно будет добавить внутренний-div для каждого столбца. См. inner-content в моем jsfiddle. Поместите что-то подобное в каждом столбце, и они будут вести себя так, как старые элементы col-* выполнялись в BS2.

jsfiddle HTML

<div class="container">
    <p class="other-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam sed sem nec viverra. Phasellus fringilla metus vitae libero posuere mattis. Integer sit amet tincidunt felis. Maecenas et pharetra leo. Etiam venenatis purus et nibh laoreet blandit.</p>
    <div class="row">
        <div class="col-sm-6 my-column">
            Col 1
            <p class="inner-content">Inner content - THIS element is more synonymous with a Bootstrap 2 col-*.</p>
        </div>
        <div class="col-sm-6 my-column">
            Col 2
        </div>
    </div>
</div>

и CSS

.row {
    border: blue 1px solid;
}
.my-column {
    background-color: green;
    padding-top: 10px;
    padding-bottom: 10px;
}
.my-column:first-child {
    background-color: red;
}

.inner-content {
    background: #eee;
    border: #999;
    border-radius: 5px;
    padding: 15px;
}

Ответ 2

Другой вариант - создать собственный специальный CSS-класс для всяких случаев, когда вы захотите применить столбцы "безжалостные".

HTML

<div class="container">
    <div class="row no-gutter">
        <div class="col-6 col-sm-6 col-lg-6">Col 1</div>
        <div class="col-6 col-sm-6 col-lg-6">Col 2</div>
    </div>
</div>

CSS

.no-gutter [class*="-6"] {
    padding-left:0;
}

Демо: http://bootply.com/73960

Ответ 3

Я всегда добавляю этот стиль в свой Bootstrap LESS/SASS:

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

Затем в HTML вы можете написать:

<div class="row row-no-padding">

Ответ 4

Вам нужно переопределить отрицательные поля из .row на больших экранах либо напрямую, либо с помощью специального класса

@media (min-width: 768px){
    .row {
        margin-right: 0;
        margin-left: 0;
    }
}

Обновлена ​​скрипка

Ответ 5

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

.row-offset-0 {
    margin-left: 0;
    margin-right: 0;
}
.row-offset-0 > * {
    padding-left: 0;
    padding-right: 0;
}

http://jsfiddle.net/KxCkD/

Ответ 6

Обобщая идеи мартинда и других, вы можете склеить кучу столбцов вместе (а не только пару), регулируя заполнение четных и нечетных столбцов. Добавив это определение класса .no-gutter и разместив его на элементе .row

.row.no-gutter > [class*='col-']:nth-child(2n+1) {
    padding-right: 0;
 } 

.row.no-gutter > [class*='col-']:nth-child(2n) {
    padding-left: 0;
}

Или в SCSS:

.no-gutter  {
    > [class*='col-'] {
        &:nth-child(2n+1) {
            padding-right: 0;
        }
        &:nth-child(2n) {
            padding-left: 0;
        }
    }
}

Ответ 7

answer, предоставленный @yuvilio, хорошо работает для двух столбцов, но более двух - this из здесь может быть лучшим решением. Вкратце:

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Ответ 8

Используйте "clearfix" вместо "row". Он делает то же самое, за исключением того, что он не имеет отрицательного поля. Пройдите через использование "строки", и вы увидите, что это единственное отличие.

Ответ 9

Более мощная (и 100% флюидная) сетка Bootstrap 3 теперь имеет 3 размера. Крошечный (для смартфонов .col-), Small (для планшетов .col-sm-) и Large (для ноутбуков/рабочих столов .col-lg- *). 3 размера сетки позволяют контролировать поведение сетки на разных устройствах (рабочий стол, планшет, смартфон и т.д.).

В отличие от 2.x, Bootstrap 3 не обеспечивает фиксированную (пиксельную) сетку. В то время как макет фиксированной ширины все еще может быть получен с использованием простой пользовательской оболочки, теперь имеется только одна процентная (текучая) сетка. По умолчанию классы .container и .row теперь текучие по умолчанию, поэтому больше не используйте жидкую жидкость или жидкую жидкость в своей разметке 3.x.

Источник

Ответ 10

.row.row-no-padding {
    margin-left: 0 !important;
    margin-right: 0 !important;

    & > [class^="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

Ответ 11

Просто вы можете использовать следующий класс.

.nopadmar {
   padding: 0 !important;
   margin: 0 !important;
}

<div class="container-fluid">
  <div class="row">
	   <div class="col-md-6 nopadmar">Your Content<div>
       <div class="col-md-6 nopadmar">Your Content<div>
  </div>
</div>