RoR и Twitter Bootstrap 3 — столбцы независимо от размера всегда появляются в новой строке

В настоящее время я следую учебнику Майкла Хартла по Ruby on Rails, но решил работать с новейшим Twitter Bootstrap 3. Я просто экспериментирую с системой сетки, но, похоже, не могу получить столбцы, независимо от того, является ли это col-sx- , col-sm-, col-md- или col-lg-, чтобы располагаться рядом друг с другом. Я использую гем sass-rails 4.0.1 и bootstrap-sass 3.0.3.0.

Вот мой код:

<div class="container">
<div class="row">
    <div class="col-md-1">
        <h1>L</h1>
    </div>
    <div class="col-md-1">
        <p>HH</p>
    </div>
</div>
<div class="row">
    <div class="col-md-5">
        <h1>LOGO</h1>
    </div>
    <div class="col-md-7">
        <a href="#">Some Link</a>
        <a href="#">Some Link</a>
    </div>
</div>
</div>

и вот как это отображается: http://imgur.com/oCemGWS

Как сделать так, чтобы столбцы отображались рядом друг с другом?


ruby-on-rails twitter-bootstrap bootstrap-sass
person Aventuris    schedule 15.01.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Есть ли у вас доступ к другим функциям Bootstrap?

Если да, то проверьте, не переопределяете ли вы класс .row другой библиотекой (например, jquery-ui).

Если нет, попробуйте один из них:

person Gabriel S.    schedule 15.01.2014
comment
Код не правильный. У них есть 2 1-столбца поверх 12 столбцов. Я объясню больше в своем ответе. - person nil; 15.01.2014
comment
Да, первая строка не дает в сумме 12, как обычно. Я не упомянул об этом, потому что Bootstrap по-прежнему отображает сетку слева направо, если не указаны все ячейки. Это не причина его проблемы. - person Gabriel S.; 15.01.2014
comment
Похоже, что другие функции начальной загрузки работают по назначению. Класс контейнера правильно центрирует его, а заголовки и ссылки работают так, как задумано. Я не верю, что .row может быть переопределен, потому что начальная загрузка 2.3, которую я использовал раньше, работала без проблем, а также использовала ее. - person Aventuris; 15.01.2014
comment
Когда вы проверяете элементы сетки md1, вы видите, что CSS применяется из bootstrap.css? Должно быть @media (min-width: 992px) .col-md-1 { width: 8.333333333333332%;}. Обратите внимание, что если ваш контейнер имеет ширину менее 992 пикселей, сетка становится плавной, а ячейки располагаются вертикально. Вы можете иметь строки, не оборачивая их в контейнеры, если вам нужна сетка размером менее 992 пикселей, не становясь плавной. - person Gabriel S.; 15.01.2014

arrow_upward
1
arrow_downward

Bootstrap представляет собой сетку из 12 столбцов. В каждой строке должно быть до 12. У вас есть (2) 1 столбец, сложенный на 5 и 7. Сумма 5 и 7 равна 12. Судя по всему, вы пытаетесь иметь панель навигации .

Ознакомьтесь с примерами начальной загрузки, чтобы узнать, как это работает:

    http://getbootstrap.com/css/#grid

Вот достойный пример стартового шаблона от Start Boot Strap.

  http://startbootstrap.com/landing-page

Вот индексный файл:

  https://github.com/IronSummitMedia/startbootstrap/blob/master/templates/landing-page/index.html

Проверьте панель навигации. Также обратите внимание, что каждая строка или контейнер в сумме дают 12?

person nil    schedule 15.01.2014
comment
Я понимаю, что их нужно добавить до 12, я просто сделал их 1-столбцами, чтобы показать, что поля или отступы не были проблемой. Во втором ряду их в сумме получается 12, и они по-прежнему не сидят рядом друг с другом. - person Aventuris; 15.01.2014
comment
Вы можете проверить этот jsfiddle.net/bkC73/1 для справки, хотя окно вывода должно быть изменен до размера выше 920 пикселей, в противном случае сетка становится отзывчивой, а ячейки располагаются вертикально. - person Gabriel S.; 15.01.2014
comment
Я добавил случайный фрагмент css из вашей скрипки, и они внезапно появились рядом друг с другом, поэтому я удалил css, и теперь они все еще существуют. Очень-очень странно, но теперь это работает. Спасибо за помощь, ребята! - person Aventuris; 16.01.2014