Twitter Bootstrap охватывает перетекание

http://jsfiddle.net/jgehrs/MgcDU/3103/Twitter Bootstrap охватывает перетекание

У меня есть этот блок кода, который должен привести к 4-пролетов одинакового размера всех выстроенных по горизонтали, но, как вы можете видеть, четвёртой блок выталкивается вниз на новую строку. Я использовал загрузчик в течение нескольких дней, и это первый раз, когда я это видел.

<div id='middle' class='row'> 
    <div class='span3'> 
    <div>1</div> 
    </div> 
    <div class='span3'> 
    <div>2</div> 
    </div> 
    <div class='span3'> 
    <div>3</div> 
    </div> 
    <div class='span3'> 
    <div>4</div> 
    </div>

spans overflowing

Edit: Вот jsFiddle показывает проблему.

источник

2013-04-01 Jeremy Gehrs

Есть ли граница? Это может сломать его. –

Есть граница 1px, но я получаю тот же результат без рамки. –

Возможно, вы захотите сделать JSfiddle. Если это не граница, возможно, это другой стиль. –

макет Fluid работает с процентами. Вы можете попробовать <div class="row-fluid">, который исправил его для меня.

источник

2013-04-02 01:27:16 kefth

Yup, похоже, в этом была проблема. Благодаря! –

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

В моем случае ошибка заключалась в том, что клиент переместил заголовок в строку. Этот ответ помог мне это увидеть. Так что нужна живая жидкость, и она должна быть в нужном месте ;-) – Ralf

JSFiddle

CSS-код, добавив границу производится после того, как система сетки вычисляет ширину и заставляет элемент обернуть. Я поместил класс во внутренний div и применил границу к внутреннему элементу. Я также завернул строку в контейнер div, чтобы дать ей фиксированный макет.

.myBorder { border: 1px solid gray; } 

<div class='container'> 
<div class='row'> 
    <div class='span3'> 
    <div class="myBorder">1</div> 
    </div>

Elements with Borders Wrap

источник

2013-04-01 23:19:41 Yack

Все еще не работает для меня. Установите ширину контейнера на 300 или 500 пикселей, чтобы увидеть, что я имею в виду, они снова завертываются. Разве не вся суть системы строк/пролетов Twitter-бутстрапа разбивать промежутки на процентную ширину, независимо от ширины родительского контейнера, или я не понимаю, что должна делать сетчатая система Bootstrap? –

Смотрите, если это близко к тому, что вы после: http://jsfiddle.net/panchroma/F7zRy/

Как @kyriakos отметил вы хотите использовать <div class='row-fluid'> если вы хотите сетку жидкости, и, возможно, обернуть все с <div class="container-fluid">, если вы хотите, чтобы сетка для заполнения все окно.

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

Удачи!

источник

2013-04-02 03:07:41

Вам необходимо обернуть строку в div классом container. Кроме того, изменить класс сНу подряд row-fluid, например, так:

<div class='container'> 
    <div class='row-fluid'> 
     <div class='span3'> 
     <div>1</div> 
     </div> 
     <div class='span3'> 
     <div>2</div> 
     </div> 
     <div class='span3'> 
     <div>3</div> 
     </div> 
     <div class='span3'> 
     <div>4</div> 
     </div> 
    </div> 
    </div>

Посмотрите здесь для демо: http://jsfiddle.net/MgcDU/3107/

Надежда, что помогает.

источник

2013-04-02 03:16:35 psychobunny

Twitter Bootstrap охватывает перетекание

ответ

Смежные вопросы