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

Вот пример ссылки: http://bootply.com/76369

это html, который я использую.

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

бутстрап 3 не содержит жидкости-контейнера и жидкости-ряды.

Я не могу обернуть его классом .container, потому что он станет фиксированным.

, как сделать его текучим (полная ширина страницы) макет (без горизонтальной полосы прокрутки)

с этой разметкой. при просмотре в результате отображается строка x-scroll, поэтому вы можете прокручивать ее влево и вправо, чтобы она не была.

отредактировал: 2015-12-09
Уже получил ответ, и Bootstrap уже выпустил исправление с версии 3.1.0

Ответ 1

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

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

Ответ 2

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

body { overflow-x: hidden;}

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

Другой вариант, как указано в issue, заключается в переопределении .row:

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

Ответ 3

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

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

Обновление

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

Я столкнулся с той же проблемой (желая жидкую компоновку), но хотел сохранить чувствительные параметры с перестановкой столбцов и т.д. для меньших экранов и в итоге получил небольшое изменение в переменных .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 пикселей сетка является жидкостью (без горизонтальных полос прокрутки). Ниже применимы нормальные чувствительные правила. Разумеется, вы также можете установить это на другие медиа-запросы так же легко.

Если вы не хотите редактировать и компилировать самостоятельно, вы можете переопределить maxwidth в своей собственной таблице стилей ниже:

@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>

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

Ответ 8

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

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

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

Ответ 9

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

.row {
    width:99.99%;
}

Ответ 10

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

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

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

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

Ответ 11

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

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

Ответ 12

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

Сначала вам понадобится настраиваемый контейнер и установите его на 100% ширину, а затем вам нужно будет исправить расположение маркера строки и navbar, если у вас есть:

/* 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;
}

Вы можете складывать классы контейнеров и контейнеров в корневом div, и позже вы можете использовать жидкость для контейнеров.

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

Ответ 13

Обнаружено это обходное решение

.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;
}

Ответ 14

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

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

Ответ 15

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

overflow-x: hidden;

Ответ 16

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

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

Ответ 17

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

Ответ 18

Вы можете исправить эту проблему, не нарушая загрузку 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>

Ответ 19

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

body {
  padding: 0 10px;
}

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

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

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

Ответ 20

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

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

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

Ответ 21

Подведение итогов наиболее релевантных комментариев в одном ответе:

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