如何使用Bootstrap邊框

Question

我該如何解決這個問題？ 當您將邊框添加到div時，div不居中，並且span12類不居中。

我想與邊界

<div class="row" > 
    <div class="span12" style="border: 2px solid black"> 
     <div class="row"> 
      <div class="span4"> 
      1 
     </div> 
     <div class="span4"> 
      2 
     </div> 
     <div class="span4"> 
      3 
     </div> 
     </div> 

    </div> 


</div> 

Answer 1

你不能只添加一個邊框跨度居中DIV，因爲它會打破，因爲道路寬度的佈局計算：寬=邊框+填充+寬度。由於容器爲940像素，跨度爲940像素，因此添加2像素邊框（總共4像素）會使其看起來偏離中心位置。解決方法是將寬度更改爲包含4px邊框（原始 - 4px），或者在其中創建2px邊框。

Answer 2

CSS中有一個屬性，名爲box-sizing.它決定了頁面上元素的總寬度。缺省值爲content-box，它不包含元素的填充，邊距或邊框。

因此，如果設置了div有width: 500px和20px填充周圍的一切，它會佔用540px在您的網站（500 + 20 + 20）。

這是什麼導致你的問題。 Bootstrap就像上面的例子計算事物的設置寬度，而這些東西沒有邊界。由於Bootstrap拼裝在一起就像拼圖一樣，在其中一邊添加邊框會產生501px的總寬度（繼續上面的示例）並打破布局。

解決此問題的最簡單方法是調整box-sizing。您可以使用的值是box-sizing: border-box。這包括框元素中的邊框和。 You can read more about box-sizing here.

該解決方案的一個問題是，它只適用於IE8 +。因此，如果您需要更深入的IE支持，則需要覆蓋引導程序寬度以考慮您的邊界。

要舉例說明如何計算新寬度，首先檢查Bootstrap在元素上設置的寬度。假設這是一個span6並且寬度爲320px（這純粹是假設的，span6的實際寬度將取決於您對Bootstrap的特定配置）。

old width - padding - border

：如果你想在右手邊有一個20像素的填充那邊添加一個邊框，你會在你的樣式表

.span6 { 
    padding-right: 20px; 
    border-right: 1px solid #ddd; 
    width: 299px; 
} 

其中新寬度由計算寫CSS

Answer 3

雖然它可能不是正確的方式來做到這一點，我發現一個簡單的解決方法是簡單地使用箱陰影而不是邊界...這不會打破網格系統。例如，你的情況：

HTML

<div class="container"> 
    <div class="row" > 
     <div class="span12"> 
      <div class="row"> 
       <div class="span4"> 
        1 
       </div> 
       <div class="span4"> 
        2 
       </div> 
       <div class="span4"> 
        3 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.span12{ 
    -moz-box-shadow: 0 0 2px black; 
    -webkit-box-shadow: 0 0 2px black; 
    box-shadow: 0 0 2px black; 
} 

Fiddle

Answer 4

不幸的是，這就是邊界做，他們算作一部分元素佔用的空間。請允許我介紹一下邊界少知的表弟：outline。它幾乎與邊界相同。唯一不同的是，它的行爲更像是box-shadow，因爲它不會佔用佈局中的空間，並且它必須位於元素的所有四邊。

http://codepen.io/cimmanon/pen/wyktr

.foo { 
    outline: 1px solid orange; 
} 

Answer 5

其他人所說的關於邊境VS邊框框什麼是絕對正確的。你仍然可以得到這個，而無需創建雖然任何自定義類工作：http://jsfiddle.net/panchroma/yfzdD/

HTML

<div class="container"> 
<div class="row" > 
    <div class="span12"> 
     <div class="row"> 
     <div class="span4"> 1 </div> 
     <div class="span4"> 2 </div> 
     <div class="span4"> 3 </div> 
     </div><!-- end nested row --> 
    </div><!-- end span 12 --> 

</div> <!-- end row --> 
</div><!-- end container --> 

CSS

.span12{ 
border:solid 2px black; 
background-color:grey; 
} 

祝你好運！

Answer 6

自舉3，你可以使用面板類：

<div class="panel panel-default">Surrounded by border</div>

Answer 7

取決於你希望你的div是，你可以利用自舉的內置組件thumbnail類，連同什麼大小（或不）網格系統在每個div項目周圍創建邊框。

These examples上引導的網站上展示的任何特殊額外CSS的易於使用和缺乏必要的：

<div class="row"> 
    <div class="col-xs-6 col-md-3"> 
     <a href="#" class="thumbnail"> 
      <img src="..." alt="..."> 
     </a> 
    </div> 
    ... 
</div> 

產生以下div電網項目：

或添加一些addit有理內容：

<div class="row"> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="..." alt="..."> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>...</p> 
     <p> 
      <a href="#" class="btn btn-primary" role="button">Button</a> 
      <a href="#" class="btn btn-default" role="button">Button</a> 
     </p> 
     </div> 
    </div> 
    </div> 
</div> 

產生以下div電網項目：