將顯示/井寬減少到10列

剛從Bootstrap 3開始 - 抱歉，如果這是一個愚蠢的問題。將顯示/井寬減少到10列

問題是我不想爲這個特殊的窗體使用窗口的整個寬度。它將始終在桌面上填充，但沒有足夠的信息填充12列，並且在覆蓋全部12列的井中看起來不太好。

我有一個佈局的文本框兩列，這樣的（工作小提琴here）：

<div class="row"> 
    <div class="col-md-6"> <!-- left column --> 
    <div class="row">  <!-- lots of rows in left col--> 
     <!-- text box with label, width col-md-12 --> 
    </div> 
    </div> <!-- end of left column --> 

    <div class="col-md-6"> <!-- right column --> 
    <div class="row">  <!-- lots of rows in right col --> 
     <!-- text box with label, width col-md-12 --> 
    </div> 
    </div> <!-- end of right column --> 
</row>

左欄是一個col-md-6，其中包含的寬度col-md-12行，右列是一樣的。

這看起來不錯，但文本框太寬，左右文本框之間的間距不太正確。所以，我已經改變了外排有10列而不是12（通過更改col-md-6到col-md-5）。文本框現在看起來不錯，但是右邊有很大的空白。 Bootstrap在右側生成2個空列，以使10列重新回到12.

是否有某種方法可以將右側的兩列切出，以便井在第二列之後結束？我試過.container和.container-fluid。謝謝。

來源

2014-09-04 user3260873

您可以包含一個offset作爲您的container類的一部分，並更改爲col-xs-10。這將使所有頁面內容適合10列。

<div class="container col-xs-offset-1 col-xs-10">

另一種方式通過CSS做，這是下面的，這將影響所有的container類。

.container { 
    margin-left: 8.3333%; //the same margin as added by col-xs-offset-1 
    width: 83.3333%; //the same width as added by col-xs-10 
}

如果您希望這適用於所有頁面，首選CSS（第二種方法）。如果只是一兩頁，那麼首選方法是首選。

Bootply Demo (1st option)/ Bootply Demo (2nd option)

（你也需要在你的問題一個錯字，它說</row>，它應該說</div>）。

來源

2014-09-04 13:12:54 Dan

作品 - 謝謝。我將'xs'改爲'md'以匹配其餘部分，並且它看起來是相同的。 – user3260873 2014-09-04 14:02:50

當然......'md'只會讓這個改變只適用於'md'和更大的屏幕。它也可以工作，只需注意該網站將在'xs'和'sm'屏幕上顯示12個寬度。 – Dan 2014-09-04 14:08:08

將顯示/井寬減少到10列

回答

相關問題