Bootstrap 3 - Чому клас рядків ширший від його контейнера?

116

Я щойно почав використовувати Bootstrap 3. Мені важко зрозуміти, як працює клас рядків. Чи є спосіб уникнути padding-leftі padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

twitter-bootstrap twitter-bootstrap-3

— Петран
джерело

@Adrift це все-таки правда? Я не впевнений, якщо ви маєте на увазі, що вони працюють неправильно, тому що я їх використовую, і вони, здається, працюють як слід.

— Зернові

1

@Cereal: Більше. Це був доданий в v3.0.2

— ADRIFT

3

тому що рядок завантажувального рядка має -15px лівий і правий поля.

Можливо, це не ваша проблема, але для тих, хто має той самий тип проблеми: Переконайтеся, що у ваших дівах є лише один атрибут класу. Я випадково подвоїв їх і отримав цю саму проблему.

— Єдиний справжній Колтер

151

У всіх системах сітки є жолоби між кожним стовпчиком. Система Bootstrap встановлює накладку 15 пікселів ліворуч і праворуч від кожного стовпця, щоб створити цей жолоб.

Справа в тому, що перший стовпчик не повинен мати половини жолоба зліва, а в останньому не повинен бути половини жолоба праворуч. Замість того, щоб використовувати якийсь клас .firstабо .lastклас у цих стовпцях, як це роблять деякі сіткові системи, вони замість цього встановлюють.row клас таким, що має негативні поля, які відповідають прокладці стовпців. Це "відтягує" жолоби першого та останнього стовпчиків, одночасно роблячи його ширшим.

The .rowДІВ ніколи не повинні дійсно бути використані для утримання нічого, крім стовпців сітки. Якщо це так, ви побачите зміст зміщеним відносно будь-яких стовпців, як це видно у вашій загадці.

ОНОВЛЕННЯ:

Ви змінили своє запитання після того, як я відповів, тож ось відповідь на запитання, яке ви зараз задаєте: Додайте .containerклас до першого <div>. Дивіться робочий приклад .

— Шон Райан
джерело

2

Сітка колон розділені прокладкою, а НЕ різниці (в BS3)

— Adrift

3

Чудово! Це пояснює весь переповнений вміст.

— Рутвік Ґангурде

27

За допомогою завантажувальної версії 3.3.7 ця проблема вирішується, обертаючи .row з .container-fluid.

— дбарма
джерело

це працювало для мене, хоча, спочатку я думав, що це не так, це тому, що я відкрив веб-консоль розробника, що зменшує ширину, але, мабуть, також це змінює. Тут .container-fluidтакож пропонується використання: stackoverflow.com/a/23616447/5272567

— Маттіас

працює також, коли обгортковий дів знаходиться в положенні absolute. спасибі за підказку

— InsOp

якби я міг кілька разів голосувати за цю відповідь ... :)

— rony36

Те саме виправлення для Bootstrap 4.

— Роб L

19

Дивіться мою відповідь нижче на подібний пост.

Чому bootstrap .row має за замовчуванням поле зліва від -30px?

Ви в основному використовуєте "clearfix" замість "row". Це точно так само, як "рядок", виключаючи від'ємну маржу.

— Кайл
джерело

2

Ці класи роблять дві різні речі, хоча вони, можливо, візуально роблять це. Очистити не настільки гнучко в чутливих ситуаціях та з сітчастими системами поведінка .row правильне.

— Тодд Баур

Це вирішує переповнений вміст поза обгорткової упаковки.

— Бходжендра Рауніяр

Але кращий спосіб - обернути рядок контейнером.

— Бходжендра Рауніяр

НАЙКРАЩІ ВІДПОВІДЬ! Вгору!

— Андерсон Брессайн

18

Я використовував клас рядків усередині класу контейнерів, і все-таки була певна проблема. Коли я додав margin-left: auto; margin-right: auto;до .rowкласу, він працював чудово.

— Джефрі
джерело

8

Це спрацювало як шарм! Додавання класу 'mx-auto' у завантажувальній програмі 4 для мене вирішило проблему переповнення.

— Мішель М.

3

@Michelle M. повинен отримати повну суму за цю відповідь.
Про це вона сказала в одному з коментарів:

Додавання класу 'mx-auto' у завантажувальній програмі 4 для мене вирішило проблему переповнення.

Вам потрібно буде оновити свій перший divелемент так:

<div class="row mx-auto" style="background:#000000">

Не потрібно робити це для всіх вкладених рядків (якщо у вас є).
Просто додайте mx-autoдо найбільш зовнішніх row(або рядків), щоб уникнути вертикальної смуги прокрутки.
Не змінюйте поведінку всіх рядків завантаження, додаючи клас "рядок" для заміни поля.

— MikeTeeVee
джерело

1

Для будь-яких майбутніх розробників, налагодження цієї проблеми:

Bootstrap встановлює прокладку для стовпців рядків, тому жоден вміст рядка не повинен з’являтися поза контейнером. Якщо ви відчуваєте це, і ви правильно використовуєте сітку системи завантажувача за допомогою класів col -..., швидше за все, у вас є додаткові CSS десь скидання прокладки на стовпцях.

— JSideris
джерело

Або у вас є стара версія Bootstrap. Наприклад, 3.0.0 поширюється з VS2015. Дивіться github.com/twbs/bootstrap/isissue/8959

— Пригода