Bootstrap 3 і 4 .контейнер-рідина з сіткою, що додає небажану прокладку

Я хотів би, щоб мій вміст був текучим, але при використанні .container-fluidз сіткою Bootstrap я все ще бачу відступ. Як я можу позбутися прокладки?

Я бачу, що я не отримую заповнення за допомогою .row, але я хочу додати стовпці, і як тільки я це отримаю, заповнення повертається: O.

Я хочу мати можливість використовувати стовпці на всю ширину.

Приклад:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

Рішення, яке я отримав:

Перевизначити bootstrap.css, посилання 1427 і 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

до

padding-right: 0px;
padding-left: 0px;

Ви також повинні додати "рядок" до кожного контейнера, який "виправить" цю проблему!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

Див. Http://jsfiddle.net/3px20h6t/

Будь ласка, знайдіть фактичний css від Bootstrap

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

Коли ви додаєте .container-fluidклас, він додає горизонтальне заповнення розміром 15 пікселів, і те саме буде видалено, коли ви додасте .rowклас як дочірній елемент за від’ємним полем, встановленим у рядку.

Минуло 5 років, і досить дивно, що там стільки відповідей, які не відповідають (або суперечать) правилам початкового завантаження або насправді не відповідають на питання ...

Коротка відповідь:
Просто використовуйте no-guttersклас Bootstrap у вашому рядку, щоб видалити відступ:

  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(Також ви забули додати </div>в кінець файлу. Це також зафіксовано у наведеному вище коді)

Примітка:

Бувають випадки, коли ви хочете також видалити оббивку самого контейнера. У цьому випадку розгляньте можливість відмови .containerабо .container-fluidзанять відповідно до рекомендацій документації .

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

Довга відповідь:

У паддінгах ви отримуєте фактично описувалися в Bootstrap в документації :

Ряди - це обгортки для колон. Кожен стовпець має горизонтальну прокладку (так званий жолоб) для контролю простору між ними. Потім це заповнення протидіє рядкам з від’ємними полями. Таким чином, весь вміст у ваших стовпцях візуально вирівнюється по лівій стороні.

І про рішення, яке також було задокументовано:

Стовпці мають горизонтальне заповнення для створення жолобів між окремими стовпцями, однак ви можете видалити поле з рядків та заповнення з стовпців .no-жолобами на .row.

Щодо скидання контейнера:

Потрібен дизайн від краю до краю? Відкиньте батьківський .container або .container-fluid.

Бонус: Про помилки, виявлені в інших відповідях

• Уникайте злому класів контейнерів bootstrap, замість того, щоб переконатися, що ви вмістили весь вміст у col-s та обернули їх row-s, як сказано в документації :

У макеті сітки вміст повинен розміщуватися всередині стовпців, і лише стовпці можуть бути безпосередніми нащадками рядків.

• Якщо вам все одно доведеться робити хак (на випадок, якщо хтось уже зіпсував речі, і вам потрібно швидко вирішити проблему), розгляньте можливість використання Bootstrap px-0для видалення горизонтальних прокладок замість цього pl-0 pr-0або переосмислення ваших стилів.

Я думаю, що у мене була та сама вимога, що і у Тіма, але жодна з відповідей не передбачає рішення "стовпчик області перегляду від краю до краю із звичайними внутрішніми жолобами". Або іншим способом сказати: як я можу змусити свій перший і останній стовпці увірватися в заповнення контейнера і перейти до краю області перегляду, зберігаючи при цьому нормальні жолоби між стовпцями.

З того, що я можу сказати, немає чистого і чистого рішення. Це те, що працює для мене, але це далеко поза тим, що підтримується Bootstrap. Але це працює наразі (Bootstrap 3.3.5 & 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

Зразок HTML:

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

CSS:

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

Фокус полягає в тому, щоб вкласти divпроміжок між рядком і стовпцями, щоб сформувати додаткове поле -15px, яке можна натиснути на заповнення контейнера. Додаткове від’ємне поле створює горизонтальну прокрутку (у пробіли) на малих вікнах перегляду. Додавання overflow-x: hiddenдо .rowпотрібне для його придушення.

Це працює так само, .container-fluidяк для .container.

Ось короткий підсумок Bootstrap 4:

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

Це працює для мене.

Чому б не заперечити прокладку, додану контейнером-рідиною , позначивши ліву та праву прокладки як 0?

<div class="container-fluid pl-0 pr-0">

ще кращий спосіб? відсутність заповнення на рівні контейнера (очищувач)

<div class="container-fluid pl-0 pr-0">

Вам потрібні лише ці властивості CSS у класі .container Bootstrap, і ви можете помістити всередину нього звичайну систему сіток, якщо хтось не вмістить контейнер поза ним (без scroll-x у вікні перегляду).

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

CSS:

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

У нових альфа-версіях вони запровадили класи інтервалів інтервалів . Потім структуру можна змінити, якщо ви використовуєте їх розумно.

Відстань між класами корисності

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0і pr-0видалить провідні та кінцеві відступи з колон. Залишилося одне питання - це вбудовані рядки стовпця, оскільки вони все ще мають від’ємне поле. В цьому випадку:

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

Різниці версій

Також зверніть увагу, що класи інтервалів інтервалів були змінені з моменту версії 4.0.0-alpha.4. Перш ніж вони були розділені на 2 тире , наприклад , => p-x-0і p-l-0і так далі ...

Щоб залишатися в темі для версії 3: це те, що я використовую в проектах Bootstrap 3, і включаю налаштування компаса для цієї конкретної утиліти інтервалів у bootstrap-sass(версія 3) або bootstrap(версія 4.0.0-alpha.3) з подвійними тиреми або bootstrap(версія 4.0.0-alpha.4 і новіша) з одиничними тире.

Крім того, остання версія (и) збільшується у 5 разів (наприклад: pt-5padding-top 5) замість лише 3.

Компас

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

Вихід CSS

Звичайно, ви завжди можете скопіювати / вставити класи інтервалів відступів лише із згенерованого файлу CSS.

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

Думаю, ніхто не дав правильної відповіді на запитання. Моє робоче рішення: 1. Просто оголосіть ще один клас разом із прикладом класу container-fluid (.maxx):

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

2. Потім, використовуючи специфіку в частині css, зробіть це:

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

Це спрацює на 100% і видалить відступ зліва та справа. Я сподіваюся, що це допомагає.

Якщо ви працюєте з конфігуратором, ви можете встановити значення @grid-gutter-widthвід 30pxдо0

Я використовував, <div class="container-fluid" style="padding: 0px !important"> і це, здається, працює.

Я сам боровся з цим, і нарешті вірю, що я це зрозумів. Неймовірно, скільки невдалих відповідей на це питання

Все, що вам потрібно зробити, - це видалити прокладку з усіх ваших елементів .col та видалити прокладку також із .container-fluid.

Я зробив це у своєму власному проекті трохи неохайно, додавши в свій файл css наступне:

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

У мене просто є різні розміри кольорів, щоб врахувати всі різні розміри колів, які я використовую. Я впевнений, що існує більш чистий спосіб написати css, але це ілюструє кінцевий результат.

Використовуйте px-0на containerі no-guttersна, rowщоб зняти прокладки.

Посилання з Bootstrap 4 - Grid system :

Ряди - це обгортки для колон. Кожен стовпець має горизонтальну прокладку (називається жолобом) для контролю простору між ними. Потім це заповнення протидіє рядкам з від’ємними полями. Таким чином, весь вміст у ваших стовпцях візуально вирівнюється по лівій стороні.

Стовпці мають горизонтальне заповнення, щоб створити жолоби між окремими стовпцями, однак ви можете видалити поле з рядків і заповнення з стовпців .no-guttersза допомогою .row.

Далі йде демонстрація в прямому ефірі:

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

Причиною цього є те , що працює , container-fluidі colобидва мають такі відступи:

padding-right: 15px;
padding-left: 15px;

px-0може видалити горизонтальну прокладку з container-fluidі no-guttersможе видалити прокладку з col.