79

Bootstrap グリッド レイアウトの列間に余分なマージン/パディング スペースを入れようとしています。私はこれを試しましたが、結果が好きではありません。これが私のコードです：

    <div class="row">
        <div class="text-center col-md-6">
            Widget 1
        </div>
        <div class="text-center col-md-6">
            Widget 2
        </div>
    </div>

margin: 10pxと を追加したいpadding:10px。クラスをcol-md-5withpull-leftとに変更することを提案する人pull-rightもいますが、それらの間のギャップは大きすぎます。

4

15 に答える 15

99

col-md-6必要な余分なパディングを含む div を追加するだけです。は列の整合性を維持するための「バックボーン」ですが、そのcol-md-6中に追加のパディングを追加できます。

<div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div>

CSS

.classWithPad { margin:10px; padding:10px; }
于 2014-04-10T13:32:03.690 に答える
10

「justify-content-around」クラスを追加するだけです。これにより、2 つの div の間にギャップが自動的に追加されます。

ドキュメント: https://getbootstrap.com/docs/4.1/layout/grid/#horizo​​ntal-alignment

サンプル：

<div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
</div>
于 2018-11-16T14:54:59.210 に答える
1

フレックスボックスで超簡単。列を次のように変更して、スペースを確保します。col-md-5 

<div class="row widgets">
    <div class="text-center col-md-5">
        Widget 1
    </div>
    <div class="text-center col-md-5">
        Widget 2
    </div>
</div>

CSS

.widgets {
    display: flex;
    justify-content: space-around;
}
于 2017-07-12T21:08:13.867 に答える
1

セルが背景色になったときの私のような人のための解決策

HTML

<div class="row">
        <div class="col-6 cssBox">
            a<br />ba<br />ba<br />b
        </div>
        <div class="col-6 cssBox">
            a<br />b
        </div>
</div>

CSS

.cssBox {
  background-color: red;
  margin: 0 10px;
  flex-basis: calc(50% - 20px);
}
于 2019-07-26T07:45:48.567 に答える
1

これを試して：

 <div class="row">
    <div class="text-center col-md-6">
       <div class="col-md-12"> 
          Widget 1
       </div>
    </div>
    <div class="text-center col-md-6">
        <div class="col-md-12"> 
          Widget 2
        </div>
    </div>
</div>
于 2016-04-06T03:38:24.783 に答える
-3

これを試して：

<div class="row">
      <div class="col-md-5">
         Set room heater temperature
     </div>
     <div class="col-md-2"></div>
     <div class="col-md-5">
         Set room heater temperature
     </div>
</div>
于 2017-11-27T08:48:33.517 に答える