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

Это было введено в v3.1.0: http://getbootstrap.com/css/#grid-example-fluid

Коммит # 62736046 добавил "вариант .container-fluid для полноразмерных контейнеров и макетов".

Он у меня тоже есть, и пока они его исправят, я добавил этот позор css:

body { overflow-x: hidden;}

это ужасная альтернатива, но она работает. Я буду счастлив удалить его, когда они исправят проблему.

Другой альтернативой, как указано в проблеме, является переопределение .row:

.row {
  margin-left: 0px;
  margin-right: 0px;
}

Это известная проблема в BS 3 - https://github.com/twbs/bootstrap/issues/9862?source=cc

Я тестировал Bootply с использованием последней сборки, поэтому следите за GitHub, чтобы узнать о последних обновлениях / исправлениях.

В Bootstrap 3 .row должен использоваться внутри .container или .container-fluid, чтобы нейтрализовать отрицательные поля в строке. При этом исчезнет горизонтальная полоса прокрутки.

Из документов ...

«Строки должны быть помещены в .container (фиксированная ширина) или .container-fluid (полная ширина) для правильного выравнивания и заполнения».

Bootstrap 4

Отношения _4 _> _ 5 _> _ 6_ работают так же, как 3.x ...

«Контейнеры являются самым основным элементом макета в Bootstrap и необходимы при использовании нашей сеточной системы по умолчанию»

Если я вас правильно понял, добавление этого после любых медиа-запросов отменяет ограничения ширины сеток по умолчанию. У меня работает на bootstrap 3, где мне нужен был макет шириной 100%

.container {
   max-width: 100%;
   /* This will remove the outer padding, and push content edge to edge */
   padding-right: 0;
   padding-left: 0;
 }

Затем вы можете поместить элементы строки и сетки внутрь контейнера.

Обновление с 2014 года из документов Bootstrap:

Сетки и макеты во всю ширину Пользователи, которые хотят создавать полностью гибкие макеты (то есть ваш сайт растягивает всю ширину области просмотра), должны заключить свое содержимое сетки в содержащий элемент с padding: 0 15px;, чтобы компенсировать margin: 0–15 пикселей; используется для строк.

Здесь только мои 2 цента. В основном это сработает для вас, как и для меня.

body > .row {
    margin-left: 0px;
    margin-right: 0px;
}

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

// Large screen / wide desktop  (last row of file)
@container-lg-desktop:        100%; //((1140px + @grid-gutter-width));

Это значение используется один раз в grid.less и устанавливает

@media (min-width: @screen-lg-desktop) {
  .container {
    max-width: @container-lg-desktop;
  }
  ....
}

В результате сетка размером более 1200 пикселей становится плавной (без горизонтальных полос прокрутки). Ниже применяются нормальные правила реагирования. Вы, конечно, можете так же легко установить это и для других медиа-запросов.

Если вы не хотите редактировать и компилировать .less самостоятельно, вы можете переопределить максимальную ширину в своей собственной таблице стилей, как показано ниже:

@media (min-width: 1200px) {  /* or min-width: wherever-you-want-your-fluid-breakpoint */
  body .container {
    max-width: 100%;
  }
}

Все это предполагает, что вы используете обычный синтаксис сетки Bootstrap, включая контейнер, как показано ниже:

<div class="container">
  <div class="row" >
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

Надеюсь это поможет!

В последней версии Twitter Bootstrap макет по умолчанию является гибким, поэтому вам не нужны дополнительные классы, чтобы объявить макет как гибкий.

Вы также можете обратиться к -

http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ http://blog.getbootstrap.com/

Это сработало для меня. Протестировано в FF, Chrome, IE11, IE10

.row {
    width:99.99%;
}

Горизонтальная полоса прокрутки может появиться, если container-fluid div расположен непосредственно внутри body.

Правильный способ использования структуры container-fluid:

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <!-- content goes here -->
            </div>
        </div>
    </section>
</body>

Итак, попробуйте обернуть свои container-fluid DIV во внешний div, например <div id="wrap"> или <section>, <article> или <aside> или другой специализированный <div>, и presto! без горизонтальной полосы прокрутки.

В Bootstrap 3 размещение столбцов непосредственно под основной частью должно дать вам гибкий макет без горизонтальной полосы прокрутки.

<body>
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</body>

Версия Bootstrap 3.0 сложна, они добавят исправление для этой проблемы и, вероятно, вернут жидкость-контейнер в Bootstrap 3.1. Но до тех пор вот исправление, которое я использую:

Во-первых, вам понадобится настраиваемый контейнер и установите для него ширину 100%, а затем вам нужно будет исправить расположение полей строки и навигационную панель, если она у вас есть:

/* Custom container */
.container-full {
  margin: 0 auto;
  width: 100%;
}

/*fix row -15px margin*/
.container-fluid {
    padding: 0 15px;
}

/*fix navbar margin*/
.navbar{
  margin: 0 -15px;
}

/*fix navbar-right margin*/
.navbar-nav.navbar-right:last-child {
  margin-right: 0px;
}

Вы можете складывать классы container-full и container-fluid в корневом div, а позже вы можете использовать container-fluid.

Надеюсь, это поможет, если вам понадобится дополнительная информация, дайте мне знать.

Нашел это обходное решение

.row {
  margin-left: 0;
  margin-right: 0;
}
[class^="col-"] > [class^="col-"]:first-child,
[class^="col-"] > [class*=" col-"]:first-child
[class*=" col-"] > [class^="col-"]:first-child,
[class*=" col-"]> [class*=" col-"]:first-child,
.row > [class^="col-"]:first-child,
.row > [class*=" col-"]:first-child{
  padding-left: 0px;
}
[class^="col-"] > [class^="col-"]:last-child,
[class^="col-"] > [class*=" col-"]:last-child
[class*=" col-"] > [class^="col-"]:last-child,
[class*=" col-"]> [class*=" col-"]:last-child,
.row > [class^="col-"]:last-child,
.row > [class*=" col-"]:last-child{
    padding-right: 0px;
}

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

<div class="row" style="margin-right:0px;">
  <div class="col-md-6">
  <div class="col-md-6">
</div>

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

overflow-x: hidden;

Если для кого-то это все еще актуально, мое решение было таким:

.container{
    overflow: hidden;
    overflow-y: auto;
}

По умолчанию он уже плавный. Если вы хотите быть плавным для меньшей ширины, вместо col-md-6 используйте col-sm-6 или col-xs-6.

Вы можете решить эту проблему, не нарушая загрузочный css, и дождаться исправления в следующей версии, так что вы можете просто обернуть строку, указав собственный класс .container-fluid с заполнением.

//Add this class to your global css file
<style>
   .container-fluid {
       padding: 0 15px;  
   }
</style>

   //Wrap your rows in within this .container-fluid 
   <div class="container-fluid">
      <div class="row">
          <div class="col-md-3">content</div>
          <div class="col-md-9">content</div>
          <div class="col-md-3">content</div>
      </div>
   </div> 

Вы можете добавить отступы 10 пикселей по бокам к элементу body, если все его дочерние элементы являются строками.

body {
  padding: 0 10px;
}

если ваша разметка HTML выглядит примерно так:

<body>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</body>

Строки имеют отрицательное поле 10 пикселей. Вот что вызывает переполнение. Если вы добавите к телу отступ в 10 пикселей, они будут нейтрализовать друг друга.

Единственное, что мне помогло, - это установить margin:0px в самом верхнем <div class="row"> в моем html DOM.

Это снова был не самый привлекательный способ решить проблему, но, поскольку он есть только в одном месте, я поместил его в строку.

В качестве fyi исправления контейнера-жидкости и очевидной начальной загрузки только увеличили пробелы по обе стороны от видимой страницы ... :( Хотя я наткнулся на свое решение, прочитав назад и вперед по проблеме github - так что стоит прочитать.

Обобщение наиболее актуальных комментариев в одном ответе:

• это известная ошибка
• есть обходные пути, но они могут вам не понадобиться (читайте дальше)
• это происходит, когда элементы размещаются непосредственно внутри тела, а не внутри div container-fluid или другого, содержащего div. Размещение их непосредственно в теле - это именно то, что делает большинство людей при локальном тестировании. После того, как вы разместите свой код на всей странице (например, в контейнере-жидкости или другом контейнере div), вы не столкнетесь с этой проблемой (не нужно ничего менять).