Вот пример ссылки: 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
Это было введено в v3.1.0: http://getbootstrap.com/css/#grid-example-fluid
Commit # 62736046 добавлена опция ".container-fluid для контейнеров и макетов полной ширины".
У меня также есть его, и, ожидая их исправить, я добавил этот позор css:
body { overflow-x: hidden;}
Это ужасная альтернатива, но она работает. Я буду рад удалить его, когда они исправят проблему.
Другой вариант, как указано в issue, заключается в переопределении .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-fluid (полная ширина) для правильного выравнивания и заполнения.
<div class="container-fluid">
(или любое другое имя, которое вы хотите) и присвоить ему margin-left: 15px; margin-right: 15px;
отменить отрицательное поле row
.
Обновление с 2014 года из документов Bootstrap:
Сетки и макеты полной ширины Люди, которые хотят создать полностью жидкую макеты (это означает, что ваш сайт растягивает всю ширину окна просмотра) должен обернуть содержимое сетки в содержащем элементе с дополнением: 0 15px;, чтобы компенсировать маркер : 0 -15px;, используемый в .rows.
Если вы правильно поняли, добавив это после того, как любые медиа-запросы переопределяют ограничения ширины по умолчанию. Работает для меня на бутстрапе 3, где мне нужна компоновка ширины 100%
.container {
max-width: 100%;
/* This will remove the outer padding, and push content edge to edge */
padding-right: 0;
padding-left: 0;
}
Затем вы можете поместить свои элементы строки и сетки в контейнер.
Просто мои 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 пикселей сетка является жидкостью (без горизонтальных полос прокрутки). Ниже применимы нормальные чувствительные правила. Разумеется, вы также можете установить это на другие медиа-запросы так же легко.
Если вы не хотите редактировать и компилировать самостоятельно, вы можете переопределить 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>
Надеюсь, это поможет!
Горизонтальная полоса прокрутки может отображаться, если 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! нет горизонтальной полосы прокрутки.
Это сработало для меня. Протестировано в FF, Chrome, IE11, IE10
.row {
width:99.99%;
}
В последней версии Twitter Bootstrap макет по умолчанию по умолчанию, поэтому вам не нужны дополнительные классы, чтобы объявить ваш макет как жидкий.
Вы также можете обратиться к
http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ http://blog.getbootstrap.com/
Если это все еще актуально для кого-то, мое решение было следующим:
.container{
overflow: hidden;
overflow-y: auto;
}
Применить к телу, кажется, избавиться от горизонтальной полосы прокрутки
overflow-x: hidden;
Это то, что сработало для меня. Я добавил стиль inline, чтобы удалить небольшой запас справа. Мне не очень нравится делать встроенный стиль, но этот атрибут одиночного стиля в моем html облегчает мне запоминание о том, как взломать работу, связанный с моим другим хорошо разделенным кодом. Это также устраняет проблему загрузки внешних стилей до или после таблицы стилей загрузки по умолчанию.
<div class="row" style="margin-right:0px;">
<div class="col-md-6">
<div class="col-md-6">
</div>
Обнаружено это обходное решение
.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;
}
Версия 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, и позже вы можете использовать жидкость для контейнеров.
Надеюсь, что это поможет, если вам нужна дополнительная информация, дайте мне знать.
В Bootstrap 3, помещение столбцов сразу под телом должно дать вам макет жидкости без горизонтальной полосы прокрутки
<body>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</body>
Подведение итогов наиболее релевантных комментариев в одном ответе:
Единственное, что мне помогло, это установить margin:0px
в самый верхний <div class="row">
в моем html DOM.
Это снова не самый привлекательный способ решить проблему, но поскольку это только в одном месте, я ставлю его встроенным.
Как fyi, контейнер-жидкость и явные исправления бутстрапа вводили только расширенные пробелы по обе стороны видимой страницы...:( Хотя я натолкнулся на свое решение, прочитав взад и вперед по проблеме github - так достойное чтение.
Вы можете добавить отступ 10px по бокам к вашему элементу тела, если все его дети являются строками
body {
padding: 0 10px;
}
если ваша разметка HTML выглядит примерно так:
<body>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</body>
Строки имеют отрицательный запас 10 px. Это то, что вызывает переполнение. Если вы добавите 10px дополнение к телу, они отменяют друг друга.
Вы можете исправить эту проблему, не нарушая загрузку 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>
По умолчанию он уже текучий. Если вы хотите быть текучим для меньшей ширины вместо col-md-6
, используйте col-sm-6
или col-xs-6
.