帶Twitter的2列布局Bootstrap

我試圖用Twitter Bootstrap製作2列布局。爲了簡單，我們說我們用玉：帶Twitter的2列布局Bootstrap

.container 
    .row 
    .span3 
     label Email: 
     input(type="text") 
     label Password: 
     input(type="text") 
     input(type="submit") 
    .span9 
     h1 Hello, world! 
     p This is a paragraph.

所以，我的主要問題是輸入的寬度小於span3，當我爲輸入指定.span3，它打破了網格佈局，同時調整。

而常見問題：BS中元素類的主要規則是什麼？我是否應該將所有元素包裝在.spanN中？此代碼：

.row 
    .span3 
    h1 Hello

作品一樣簡單：

.row 
    h1.span3 Hello

一切都在我的腦海:(

來源

2013-03-18 foobar56

嘗試在輸入上使用「輸入塊級」類。 – 2013-03-18 10:14:31

@BillyMoat就是我在找的東西，謝謝！那麼，例如，按鈕（輸入（type =「submit」））？ input.btn.input-block-level（type =「submit」）不起作用。 – foobar56 2013-03-18 10:29:16

搞砸嘗試使用您輸入「輸入塊級」類。

<input type="text" class="btn input-block-level">

要使全部寬度的按鈕元素可以嘗試將其寬度設置爲100％並使其顯示爲例如

button { 
    display: block; 
    width: 100%; 
}

請記住，添加填充和/或邊境到該按鈕會再做出按鈕的寬度大於100％，所以在這種情況下，你還可以設置箱大小就可以了。

button { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

來源

2013-03-18 11:39:47

帶Twitter的2列布局Bootstrap

回答

相關問題