引導表格列 - HTML標籤導致不正確的佈局

我有以下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元素的任何問題，但我無法想象會有任何問題。我試圖包含一些截圖，但它們沒有顯示出來，所以我刪除了它們。

來源

2014-12-04 macoms01

你能顯示呈現的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

首先，您可以刪除.col-xs-12和.col-lg-3，並且仍然具有相同的佈局。

其次，代碼看起來沒問題，但能夠看到完整生成的代碼會很好。

來源

2014-12-04 15:47:42 saNs

謝謝你的回答！我現在正在處理我的解決方案，並會讓你們都知道我找到了什麼。如果我仍然卡住，我會發布生成的HTML。 – macoms01 2014-12-04 15:58:53

我認爲@Christina是正確的，問題是你在sm屏幕上有24列連續。並且它們沒有被正確地清除。 – saNs 2014-12-04 16:02:13

引導表格列 - HTML標籤導致不正確的佈局

回答

相關問題