Html div之间的空格？

我正在使用一个带有12列网格引导的框架

我必须使用所有12列，还是有办法在它们之间插入空白，而不偏移

编辑： 请考虑投票表决。 如果您认为它在当前的形式下没有被很好地询问，请解释原因。 也请考虑投票重新开放。 标记的副本与此处要求的内容几乎没有关系。 原始问题 我怎么能在一些列之间有一个空白，比如

111 111空_空间11共12列

---

因此，如果在上述情况下，列占用了太多的空间（10或11），它将使用空空间，而不是断开到新行？

Headers元素的默认宽度为：100%。因此，它已经向右浮动，但不可见

然而，您不需要浮动元素来正确对齐文本。标题标记的内部内容是文本。你只需要把它对齐

.titolo .h1,
.titolo .h4 {
    text-align: right;
}

---

我还没有足够的代表发表评论，但是，你的专栏加起来应该是12个，对吗？2+9=11

<div class="container">
  <div class="row">
    <div class="col-sm-3"><img src="http://www.brandsoftheworld.com/sites/default/files/styles/logo-thumbnail/public/0009/1170/brand.gif?itok=FfrOCEJC" width="100px" height="100px" alt="Logo" />
    </div>
    <div class="col-sm-9 titolo">
      <h1>DANI SPRINGER</h1>
      <h4>FRONT-END NINJA</h4>
    </div>
  </div>
</div>

.titolo {
  vertical-align: bottom;
  **text-align: right;**
  height: 50px;
  float: right;
  display: block;
  background-color: blue;
}

结果应该如下所示：

---

如果你有一个12列的网格，你必须有所有列来完成网格。只需将col-2更改为col-3，就不需要使用float。此外，还可以使用偏移量2+9+1=12：

.col-offset-1 {
   margin-left: 8.33%;
}

<div class="row">
    <div class="col-2">
        <img src="images/logo.png" width="100px" height="100px" alt="Logo" />
    </div>
    <div class="col-offset-1 col-9 titolo">
        <h1>DANI SPRINGER</h1>
        <h4>FRONT-END NINJA</h4>
    </div>
</div>

---

你说得对。我把文本和内联混淆了。无论如何，内容可以与文本对齐属性对齐。如果要将div向右推，只需在内联块中对其进行变换或指定固定宽度即可。显示：块；宽度：默认为100%。在评论之前你能测试一下吗？你添加了太多的边框，这不可能证明实际发生了什么。然后在h1中添加右边的边距会破坏设计。响应网格中的所有边距都必须为百分比。好的一点，我只是让它工作，我会更新它。我没有得到它。我指的是网格边距，而不是标题元素。您可以使用不同的方法。2+9+1偏移、2+10或3+9。由你决定。但是你应该记住，你需要全部12列才能到达右边。

.col-offset-1 {
   margin-left: 8.33%;
}

<div class="row">
    <div class="col-2">
        <img src="images/logo.png" width="100px" height="100px" alt="Logo" />
    </div>
    <div class="col-offset-1 col-9 titolo">
        <h1>DANI SPRINGER</h1>
        <h4>FRONT-END NINJA</h4>
    </div>
</div>