Может быть, я сумасшедший, но разве нет способа избавиться от 20px желоба в twitter bootstrap? Например, я использовал фреймворки, которые используют альфу и омегу, которые перекатывают желоб, чтобы дать ему преимущество: 0px; В настоящее время я не вижу ничего подобного в документации по загрузке twitter.Избавиться от Gutter в TwitterBootstrap
UPDATE:
ли что-нибудь в документации не видят либо, но здесь это исправить:
Если вы хотите удалить желобок на левом и правом концах вашего контейнера, вы должен будет добавить класс для .alpha и .omega.
.alpha { margin-left: 0; }
.omega { margin-right: 0; }
Если вы хотите изменить все водостоки:
В файле variables.less, вы можете изменить ширину Gutter:
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridGutterWidth: 20px;
С загрузчиком вам не нужен класс для удаления желоба, он удаляется классом .row, где вы автоматически помещаете свои span divs, чтобы все было хорошо расположено в сетке.
.row {
margin-left: -20px;
}
Немного разъяснений.
Другие рамки, такие как сетка 960.gs, используют .alpha и .omega, чтобы удалить лишний запас слева или справа от сетки, чтобы они могли хорошо сидеть с элементами сетки внутри линии. С помощью бутстрапа это уже не так, поскольку сетка имеет этот избыточный запас, удаленный .row div, который необходим для того, чтобы ваши .span div были хорошо расположены в сетке.
Этот вариант не фиксирует желоб omega. – Karl
content goes here
@ b-lew разметка выглядит следующим образом: '
content goes here
Вы можете разместить свой контент в контейнер-жидкости DIV:
<div class='container-fluid'>
...
</div>
А затем изменить (в bootstrap.css) или переопределить контейнер жидкости класс:
.container-fluid {
padding-left: 0px;
margin-left: -20px;
}
boostrap-отзывчивыми. css имеет один и тот же класс, поэтому вы можете устанавливать разные поля для мобильных экранов или экранов рабочего стола.
Его лучше добавить пользовательский стиль, похожий на альфа и омегу в 960.gs framework.
Просто скачайте пользовательскую версию базы здесь
http://twitter.github.com/bootstrap/customize.html#variables
и сделать gridGutter = 0px
body {
margin-right: -15px;
overflow-x: hidden;
}
была такая же проблема, это решить это для моего довольно хорошо:
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
}
То, что мне нужно! – pixelearth
Попробуйте добавить это в свой собственный css:
.row-nogutter {
margin-right: 0;
margin-left: 0;
}
И используя свою строку как <div class='row row-nogutter'>
Если это все еще не работает, попробуйте добавлять !important, но я не рекомендую.
Я знаю, что это старая тема ... но я уверен, что это все еще проблема для людей. Я нашел этот очень полезный CSS, который решил его для меня. Наслаждайтесь!
/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:0;
padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
padding-right:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
padding-left:0;
}
/* only for column content visible */
.col-lg-1>div {background-color:#ddd;}
Но это меняет все ширина желоба в ... Я не хотел этого. Я подумал, что, возможно, такая особенность была встроена в рамки. Я просто добавлю свой собственный CSS, чтобы он работал. – bryanlewis
Я обновил свой ответ, я ничего не вижу в документации, позволяющей удалить альфа-и омега-желоба. Но вы можете легко добавить классы в свой CSS, чтобы исправить это. – Karl
Да, я просто добавлю, что css ... странно, я бы подумал, что так популярно, как эта фреймворк, у них уже есть это там. Спасибо, что пояснил, что я не орех. Я ценю ваше время! – bryanlewis