Ruby on rails RoR&；Twitter Bootstrap 3-cols，无论维度如何，始终显示在新行中

我目前正在关注Michael Hartl的Ruby on Rails教程，但决定使用最新的Twitter Bootstrap 3。我只是在试验网格系统，但我似乎无法让cols，无论它是col sx-、col sm-、col md-还是col lg-出现在一起。我正在使用sass rails 4.0.1 gem和引导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>

L
嗯

标志

这就是它的呈现方式：

---

如何使列按应有的方式彼此并排显示？

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

您有权访问其他引导功能吗

如果是，则检查您是否没有用另一个库（例如jqueryui）覆盖

.row

类

如果没有，请尝试以下方法之一：

• 检查您的scss/sass样式表是否有

  @import“bootstrap”（引导sass需要按照其指示工作）

• 尝试本地加载引导：将

  Bootstrap.js

  和

  Bootstrap.css

  文件放在

  vendor/assets/javascripts

  和

  vendor/assets/stylesheet

  中，并将它们添加到

  application.js

  文件（

  /=require Bootstrap

  ）和

  application.css

  文件中（

  *=需要引导

  ）

---

引导是一个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？

代码不正确。它们在12列的顶部有2个1列。我将在回答中详细解释。是的，第一行的相加不是通常应该的12行。我没有提到它，因为如果所有单元格都不正确，引导仍然从左到右呈现网格指定。这不是问题的原因。似乎其他引导功能按预期工作。容器类正确地将其居中，标题和链接也按预期工作。我不相信有机会重写.row，因为我以前使用的引导2.3工作正常，并且还使用了It、 检查md1网格div时，是否看到从bootstrap.CSS应用的CSS？它应该是

@media（最小宽度：992px）.col-md-1{width:8.3332%；}

。请注意，如果您的容器的宽度小于992px，网格将变为流体，单元格将垂直堆叠。如果您希望网格小于992px而不变为流体，则可以在容器中包含行而无需将其包裹。我知道它们需要加起来12列，我只是将它们设为1列，以显示边距或间距填充并不是问题所在。在第二行中，它们加起来有12个，但它们仍然没有并排放置。您可以检查这一点以供参考，尽管输出窗口的大小需要调整到高于920px，否则网格会响应，单元格会垂直堆叠。我从您的小提琴和所有屏幕中随机添加了一段css突然，他们出现在一起，所以我删除了css，现在他们仍然这样做。非常奇怪，但现在它可以工作了。谢谢大家的帮助。