Twitter引導固定佈局問題

我使用Twitter引導得到了一個奇怪的問題。設置一個測試頁面，其行爲應與此處的示例類似：http://twitter.github.io/bootstrap/examples/hero.html。這裏的HTML：Twitter引導固定佈局問題

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap.css" /> 
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-yii.css" /> 
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-responsive.min.css" /> 
    <script type="text/javascript" src="/assets/8b15478e/jquery.js"></script> 
    <script type="text/javascript" src="/assets/24d7eb4f/js/bootstrap.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="span4" style="border: 1px solid red;"></div> 
      <div class="span4" style="border: 1px solid red;"></div> 
      <div class="span4" style="border: 1px solid red;"></div> 
     </div>    
    </div> 
</body>

應該產生上面的鏈接顯示的結果，但我得到的下一行第三span4，它就會在這兩個先推了。除此之外，容器的行爲如預期的那樣，即它居中。

我在這裏錯過了什麼？

來源

2013-04-18 olemara

注意：我在此處使用Twitter引導程序作爲Yii的添加項。應該不是問題。 – olemara

邊框將像素添加到寬度，因此span4現在從300px增加到302px（border-left：1px + border-right：1px），因此進入下一行。見here

border: 1px solid red;

你可以給一個背景，而不是邊界測試。

檢查fiddle

來源

2013-04-18 09:34:18 anpsmn

嗨，感謝您的反饋@anpsmn。你當然是正確的，你會得到一些額外的邊框填充。扔我這裏的東西是，我正在使用此內部導航和選項卡，這導致了相同的效果，因爲這接壤。我對嗎？ – olemara

是的，如果沒有足夠的空間，邊框會添加像素，並會使元素到達下一行。 – anpsmn

應用一個border增加了一些寬度您span唱到你的佈局。

處理「列樣式」的本地引導程序解決方案是.well元素。

HTML

<div class="row"> 
    <div class="span4"> 
     <div class="well well-with-my-style"> 
     </div> 
    </div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div>

CSS

.well-with-my-style { 
    border: 1px solid red; 
    background: none; 
    /* whatever... */ 
}

這樣的話，你會尊重原生布局，並從.well元素獲利，但要記住，你必須覆蓋.well樣式您擁有（使用.well-with-my-style類）。

來源

2013-04-18 10:09:01 albertedevigo

嗨，謝謝你的反饋@simbirsk。你當然是正確的，你會得到一些額外的邊框填充。扔我這裏的東西是，我正在使用此內部導航和選項卡，這導致了相同的效果，因爲這接壤。我對嗎？ – olemara

每個選項卡內的佈局都是流暢的時候，選項卡（左側或右側，我擱置）不會導致任何問題。我認爲這是一個不同的問題。 – albertedevigo

Twitter引導固定佈局問題

回答

相關問題