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

вот пример ссылки: 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>


bootstrap 3 не имеет контейнера-жидкости и строки-жидкости.



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



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



С этими разметки. при просмотре в результате х-свиток панель видна, так что вы можете прокручивать влево и вправо, что он не должен.




редактировать: 2015-12-09

Уже получил ответ и Bootstrap уже выпустил исправление с 3.1.0

629   21  

21 ответов:

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

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

13  
2014-02-13 11:26:31

у меня тоже есть это, и, ожидая их, чтобы исправить это, я добавил этот стыд css:

body { overflow-x: hidden;}

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

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

.row {
  margin-left: 0px;
  margin-right: 0px;
}
57  
2013-10-17 21:31:00

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

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

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

от доктора...

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

Bootstrap 4

The container>row>col отношения так же, как и 3.икс...

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

11  
2018-04-29 14:59:06

Если я правильно вас понимаю, добавление этого после любых медиа-запросов переопределяет ограничения ширины на сетках по умолчанию. Работает для меня на 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;
 }

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

8  
2013-08-29 06:38:12

обновление от 2014 года с начальной загрузки, документация:

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

8  
2014-01-26 08:00:48

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

body > .row {
    margin-left: 0px;
    margin-right: 0px;
}
5  
2013-10-24 09:14:34

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

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

это значение используется один раз в сетке.меньше и устанавливает

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

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

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

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

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

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

надеюсь, что это помогает!

3  
2013-10-30 17:12:13

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

вы можете дополнительно обратиться к -

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

2  
2013-08-23 04:19:32

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

.row {
    width:99.99%;
}
2  
2014-04-28 16:45:36

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

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

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

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

2  
2016-02-06 04:18:40

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

<body>
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</body>
1  
2013-10-23 19:07:54

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

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

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

1  
2014-01-07 20:19:06

найдено это решение

.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;
}
1  
2014-03-27 15:45:11

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

<div class="row" style="margin-right:0px;">
  <div class="col-md-6">
  <div class="col-md-6">
</div>
1  
2015-01-15 23:14:15

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

overflow-x: hidden;
1  
2015-08-13 01:18:10

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

.container{
    overflow: hidden;
    overflow-y: auto;
}
1  
2015-12-09 00:38:27

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

0  
2013-08-23 04:38:16

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

//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>
0  
2014-05-09 10:30:58

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

body {
  padding: 0 10px;
}

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

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

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

0  
2014-07-23 11:59:20

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

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

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

0  
2016-10-19 14:28:51

суммируя наиболее актуальные комментарии в одном ответе:

  • Это известная ошибка
  • есть обходные пути, но они могут вам не понадобиться (читайте дальше)
  • это происходит, когда элементы размещаются непосредственно внутри тела, а не внутри контейнер-жидкости div или другой содержащий div. Размещение их непосредственно в теле-это именно то, что большинство людей делают при локальном тестировании. Как только вы разместите свой код на полной странице (таким образом, в контейнере-жидкости или другом контейнере div) вы не столкнетесь с этой проблемой (не нужно ничего менять).
0  
2017-01-10 03:46:56

Comments

    Ничего не найдено.
Click here to cancel reply.