15

Bootstrap 3.0 を使用していますが、パネル間にパディング/スペースを追加する方法がわかりません。

<div class="row">
  <div class="col-xs-4 panel">
    <div class="panel-body">
      <h4>First Cell</h4>
    </div>
  </div>
  <div class="col-xs-4 panel">
    <div class="panel-body">
      <h4>Second Cell</h4>
    </div>
  </div>
  <div class="col-xs-4 panel">
    <div class="panel-body">
      <h4>Third Cell</h4>
    </div>
  </div>
</div>

クラスを追加して幅を 30% に設定しようとしましたが、2 つのパネルがあり、1 つを右に引っ張った場合にのみ機能します。マージンを追加すると、応答性が失われ、最後のセルが次の行にドロップされます。

パネル間にギャップをレスポンシブに追加するにはどうすればよいですか?

4

4 に答える 4

21

.panel と .col* を組み合わせたくない場合:

http://jsfiddle.net/isherwood/xTc7a/1/

<div class="row">
    <div class="col-xs-4">
        <div class=" panel">
            <div class="panel-body">
                 <h4>First Cell</h4>

            </div>
        </div>
    </div>
    <div class="col-xs-4">
        <div class=" panel">
            <div class="panel-body">
                 <h4>Second Cell</h4>

            </div>
        </div>
    </div>
    <div class="col-xs-4">
        <div class=" panel">
            <div class="panel-body">
                 <h4>Third Cell</h4>

            </div>
        </div>
    </div>
</div>
于 2013-10-21T17:34:48.713 に答える
3

以下のようにhtmlを変更し、

<div class="row">
    <div class="col-xs-4">
      <div class="panel">
          <div class="panel-body">
               <h4>First Cell</h4>

          </div>
      </div>
    </div>
    <div class="col-xs-4">
    <div class="panel">
        <div class="panel-body">
             <h4>Second Cell</h4>

        </div>
    </div>
    </div>
    <div class="col-xs-4">
    <div class="panel">
        <div class="panel-body">
             <h4>Third Cell</h4>

        </div>
    </div>
    </div>
</div>
于 2013-10-21T17:30:33.217 に答える
2

このように使用して、好きな数の列に分割できます。

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        <div class=" panel">
        <div class="panel-body">
             <h4>First Cell</h4>
        </div>
    </div>
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        <div class=" panel">
        <div class="panel-body">
             <h4>Second Cell</h4>
        </div>
    </div> 
     </div>
  </div>
</div>
于 2015-11-28T09:26:58.743 に答える
0

最初の 2 つのパネルにクラス panel-4 を追加することで、これを機能させることができました。

.panel-4 {
  width:30%;
  margin-right:5%;
}
于 2013-10-21T17:30:42.137 に答える