ブートストラップ行をもっと近くにするにはどうしたらいいですか？

Question

ブートストラップの行と列でフッタを作成しようとしていますが、行間のスペースを小さくしてフッタを小さくしたいとします。私はマージンと行のパディングを無駄に変更しようとしました。

<footer class="footerClass"> 
     <div class="row footerRow"> 
      <div class="col-md-4"> 
       <b>Content</b> 
      </div> 
      <div class="col-md-3"> 
       <p>Content</p> 
      </div> 
      <div class="col-md-4"> 
       &nbsp; 
      </div> 
     </div> 
     <div class="row footerRow"> 
      <div class="col-md-4"> 
       <p>Content</p> 
      </div> 
      <div class="col-md-3"> 
       <p><a href="mailto:Content">Content</a></p> 
      </div> 
      <div class="col-md-4"> 
       <p>&nbsp;</p> 
      </div> 
     </div> 
     <div class="row footerRow"> 
      <div class="col-md-4"> 
       <p>Content</p> 
      </div> 
      <div class="col-md-3"> 
       <p>Content</p> 
      </div> 
      <div class="col-md-2"> 
       <p><a href=""><b>Content</b></a></p> 
      </div> 
      <div class="col-md-3"> 
       <p><a href=""><b>Content</b></a></p> 
      </div> 
     </div> 
     <div class="row footerRow table-condensed"> 
      <div class="col-md-4"> 
       <p>&nbsp;</p> 
      </div> 
      <div class="col-md-3"> 
       <p><a href="www.Content.org">www.Content.org</a></p> 
      </div> 
      <div class="col-md-4"> 
       <p>&nbsp;</p> 
      </div> 
     </div> 
    </footer> 

Answer 1

追加のクラスが表示されている可能性があります。私はそれはあなたの問題を解決するかどうかを確認するには、以下の方法であなたのフッターを書き換えます：

<footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <b>Content</b> 
      </div> 
      <div class="col-md-3"> 
       <p>Content</p> 
      </div> 
      <div class="col-md-4"> 
       &nbsp; 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4"> 
       <p>Content</p> 
      </div> 
      <div class="col-md-3"> 
       <p><a href="mailto:Content">Content</a></p> 
      </div> 
      <div class="col-md-4"> 
       <p>&nbsp;</p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4"> 
       <p>Content</p> 
      </div> 
      <div class="col-md-3"> 
       <p>Content</p> 
      </div> 
      <div class="col-md-2"> 
       <p><a href=""><b>Content</b></a></p> 
      </div> 
      <div class="col-md-3"> 
       <p><a href=""><b>Content</b></a></p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4"> 
       <p>&nbsp;</p> 
      </div> 
      <div class="col-md-3"> 
       <p><a href="www.Content.org">www.Content.org</a></p> 
      </div> 
      <div class="col-md-4"> 
       <p>&nbsp;</p> 
      </div> 
     </div>  
    </div> 
</footer> 

また、ブートストラップグリッドを使用した場合、通常、あなたの列の幅が行ごとに12まで追加します。これは意図的だった可能性があります。

私は私の設計で垂直方向の間隔を処理するために、次のクラスを使用します。

.voffset { margin-top: 2px; } 
.voffset1 { margin-top: 5px; } 
.voffset2 { margin-top: 10px; } 
.voffset3 { margin-top: 15px; } 
.voffset4 { margin-top: 30px; } 
.voffset5 { margin-top: 40px; } 
.voffset6 { margin-top: 60px; } 
.voffset7 { margin-top: 80px; } 
.voffset8 { margin-top: 100px; } 
.voffset9 { margin-top: 150px; } 
.boffset { margin-bottom: 2px; } 
.boffset1 { margin-bottom: 5px; } 
.boffset2 { margin-bottom: 10px; } 
.boffset3 { margin-bottom: 15px; } 
.boffset4 { margin-bottom: 30px; } 
.boffset5 { margin-bottom: 40px; } 
.boffset6 { margin-bottom: 60px; } 
.boffset7 { margin-bottom: 80px; } 
.boffset8 { margin-bottom: 100px; } 
.boffset9 { margin-bottom: 150px; } 

Answer 2

メディアクエリ「COL-MD-XX」の最小幅は992pxで、「COL-SMとクラスを適用するようにしてください-xx "と表示されます。あなたはこれを求めているかもしれません。