Question

我对Bootstrap中的网格系统有疑问。我似乎工作得很好，但“盒子”之间没有边距。例如，如果我有这个：

<div class="column">

  <div class="span11"> 

  </div>

  <div class="span11">

  </div>

</div>

这很有效。但是那之间没有空间。那么我是否指定了一个“id”并通过CSS代码自己编辑？这是正确的方法吗？例如：

<div class="column">

  <div id="box_1" class="span11"> 

  </div>

  <div id="box_2" class="span11">

  </div>

</div>

还有一件事，关于边框，颜色，我也这样做吗？

感谢

Answer 1

首先，在twitter bootstrap中没有.column但是.row

如果您想要左/右边距，请使用带有offset1的span10

如果你想要上/下边距创建一个新的.row并应用类似.show-grid

的类

对于边框和颜色，请使用通用类和特定类别的ID。

您可以在jsFiddle上创建模型，如http://jsfiddle.net/baptme/EHutn/

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<style>
.show-grid {
margin-bottom: 20px;
margin-top: 10px;
}
.show-grid [class*="span"] {
background-color: #EEEEEE;
border-radius: 3px 3px 3px 3px;
line-height: 30px;
min-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row show-grid">
<div class="span10 offset1"> 
<p>bla bla bla</p>
</div>
</div>
<div class="row show-grid">
<div class="span10 offset1">
<p>bla bla bla</p>
</div>
</div>
</div>
</body> 
</html>

Twitter Bootstrap中的边距

1 个答案: