1

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>

もう1つ、境界線、色については、同じことをしますか?

ありがとう

4

1 に答える 1

1

まず、Twitter のブートストラップには .column はありませんが、.row はありません。

左/右マージンが必要な場合は、offset1 で span10 を使用します

上/下マージンが必要な場合は、新しい .row を作成し、.show-grid のようなクラスを適用します

境界線と色には、ジェネリックにはクラスを使用し、特定には ID を使用します。

このhttp://jsfiddle.net/baptme/EHutn/のように、jsFiddle でモックアップを作成できます。 

<!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>
于 2012-06-07T15:00:07.830 に答える