我有以下HTML:引導表格列 - HTML標籤導致不正確的佈局
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@*@Html.LabelFor(s => s.BasicInfo.FirstName)*@<label>First Name:</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@Html.TextBoxFor(s => s.BasicInfo.FirstName)
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@*@Html.LabelFor(s => s.BasicInfo.LastName)*@<label>Last Name:</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@Html.TextBoxFor(s => s.BasicInfo.LastName)
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@*@Html.LabelFor(s => s.BasicInfo.City)*@<label>City:</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@Html.TextBoxFor(s => s.BasicInfo.City)
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@*@Html.LabelFor(s => s.BasicInfo.State)*@<label>State:</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@Html.TextBoxFor(s => s.BasicInfo.State)
</div>
</div>
當我拉起網頁在IE或Firefox瀏覽器中,「XS」,「MD」,以及「LG 「大小工作正常,但」sm「大小的佈局是不正確的。如果我從html中刪除<label>
標記,所有尺寸都可以正常工作。這個html/razor/css是否有效?我在網上查找關於在列中放置其他html元素的任何問題,但我無法想象會有任何問題。我試圖包含一些截圖,但它們沒有顯示出來,所以我刪除了它們。
你能顯示呈現的HTML而不是上面的嗎?另外我不認爲你需要有col-lg-3類,因爲如果沒有大的col被聲明,col-md-3將被用在大屏幕上。 – 2014-12-04 15:45:33
6 x 4是24,除非所有col-sm-6的高度相同,否則佈局將無法正確清除。此外,col-xs-12和col-lg-3不是必需的。 – Christina 2014-12-04 15:50:16
謝謝大家的意見和答案!我現在正在處理我的解決方案,並會讓你們都知道我找到了什麼以及哪些方法有效。 – macoms01 2014-12-04 15:58:18