如何使自舉行靠得更近？

-1

我正在嘗試使用引導行和列創建頁腳，並且我想通過減少行之間的間距來縮小頁腳。我試圖改變邊緣和填充行無濟於事。如何使自舉行靠得更近？

<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>

來源

2016-08-11 mitch

CSS在哪裏？ – j08691

默認情況下，Bootstrap在行之間沒有任何間距。間距來自'p'標籤的'margin-bottom'。 – APAD1

OP請上傳你的代碼的基本簡單例子... @ j08691你真的很快:) –

很可能您的其他課程導致了您所看到的間距問題。我會重寫你的頁腳通過以下方式，看它是否解決您的問題：使用引導網格時

<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; }

來源

2016-08-11 17:16:17

我想你需要用'.container'或'.container-fluid'類。 –

根據意圖，容器或容器流體類可能是必要的，但不是解決他的問題的必要條件。 –

我擔心沒有容器的行會導致水平滾動。這不是什麼好風格。 '必須將行放在.container（固定寬度）或.container-fluid（全寬度）內，以便進行適當的對齊和填充。「http://getbootstrap.com/css/#grid-intro –

-1

媒體查詢「COL-MD-XX」是992px的最小寬度，儘量以「COL-SM應用類-XX」。可能是你問這個。

來源

2016-08-11 17:26:21

如何使自舉行靠得更近？

回答

相關問題