1

I am following Michael Hartl's Ruby on Rails tutorial currently but decided to work with the newest Twitter Bootstrap 3. I am just experimenting around with the grid system but I can't seem to get the cols, no matter if it is col-sx-, col-sm-, col-md- or col-lg- to appear beside each other. I am using the sass-rails 4.0.1 gem and bootstrap-sass 3.0.3.0.

Here's my code:

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

and this is how it is rendered: http://imgur.com/oCemGWS

How do I get the columns to appear beside each other as they should?

4

2 回答 2

1

从 Bootstrap 的角度来看，您的 HTML 代码是正确的，因此您的问题很可能来自您加载引导库的方式。

您可以访问其他 Bootstrap 功能吗？

如果是，请检查您是否没有.row用另一个库（例如 jquery-ui）覆盖该类。

如果没有尝试以下之一：

  • 检查您的 scss/sass 样式表是否有@import "bootstrap";（需要 bootstrap-sass 像其手册所示那样工作）
  • 尝试在本地加载 Bootstrap：将bootstrap.js和bootstrap.css文件放入vendor/assets/javascripts并vendor/assets/stylesheets添加到您的application.js文件 ( //= require bootstrap) 和application.css文件 ( *= require bootstrap)中
于 2014-01-15T17:16:59.733 回答
1

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？

于 2014-01-15T18:52:14.030 回答