如何正確定位引導HTML的div

Question

我想正確對齊引導的div內的控件，讓它們看起來像

目前有很多的行和邊距或填充多年平均值之間的差距似乎工作。另外，如何擴展列表框以完全覆蓋屏幕的長度？它看起來像這樣

HTML

<div class="row" style="margin-left: 5px; margin-right: 5px"> 
    <div class="table"> 
     <div class="row" style="margin-top:0px; padding-top:0px; border:dotted"> 
      <div style="float: left; margin-left:10px;"> 
       @Html.ListBoxFor(m => m.cM.CategoryList, new SelectList(Model.cM.CategoryList, "CategoryID", "Description"), new { @id = "listCommentCategory" }) 
      </div> 
      <div style="margin-left:100px; margin-top:0px;"> 
       <div class="row" style="margin:0px; padding:0px; margin-bottom:0px; padding-bottom:0px; border:dashed"> 
        <div class="col-md-1"> 
         @Html.DropDownListFor(m => m.cM.HeaderList, new SelectList(Model.cM.HeaderList, "CommentID", "Comment"), new { @id = "ddlCommentHeaders" }) 
        </div> 
        <div class="col-md-2" style="margin-left:10px"> 
         Search: 
         @Html.TextBox("txtSearchHeader") 
         <button id="clear">X</button> 
        </div> 
        <div class="col-md-1" style="margin-left:10px"> 
         <button id="refresh">Refresh</button> 
        </div> 
       </div> 
       <div class="row" style="margin-left:10px; border:dashed"> 
        Select or double-click on a comment to insert: 
       </div> 
       <div class="row" style="margin-left:10px; border:dashed"> 
        @Html.ListBoxFor(m => m.cM.CommentsList, new SelectList(Model.cM.CommentsList, "CommentID", "Comment"), "listComments") 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

經過大量的高度，寬度，填充和利潤率的硬編碼的，我能達到目標。 （另外，如果我把col-xs-4設置在第二列的第一行，按鈕總是在下一行，所以我已經減少了總和爲9.我猜10也可以）

這裏是加價

<div class="table"> 
     <div class="row" style="margin-top:0px; padding-top:0px;"> 
      <div class="col-xs-2" style="width:70px; border:groove; margin-left: 20px"> 

         @Html.ListBoxFor(m => m.cM.CategoryList, new SelectList(Model.cM.CategoryList, "CategoryID", "Description"), new { @id = "listCommentCategory", @style = "height:190px; margin-top:5px; margin-bottom: 5px;" }) 

      </div> 
      <div class="col-xs10" style="float: right; width:1000px; border:groove; margin-right: 20px"> 
       <div class="row" style="margin-top:5px; padding-top:0px;"> 
        <div class="col-xs-3" style=" margin-left: 5px"> 
         @Html.DropDownListFor(m => m.cM.HeaderList, new SelectList(Model.cM.HeaderList, "CommentID", "Comment"), new { @id = "ddlCommentHeaders" }) 
        </div> 
        <div class="col-xs-4"> 
         Search: 
         @Html.TextBox("txtSearchHeader") 
         <button id="clear">X</button> 
        </div> 
        <div class="col-xs-2"> 
         <button id="refresh">Refresh</button> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-12" style="margin-left:5px"> 
         Select or double-click on a comment to insert: 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-12" style="margin-left:5px"> 
         @Html.ListBoxFor(m => m.cM.CommentsList, new SelectList(Model.cM.CommentsList, "CommentID", "Comment"), new { @id = "listComments", @style = "height:75px; margin-bottom:5px" }) 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 2

爲什麼第二列不對齊是因爲使用.COL增加在左，右15px的填充的原因。另一方面，行左邊和右邊增加了-15px的邊距。

因爲您在第一行上使用了col-md-1，而其餘列上沒有列，所以在您有下拉列的行上有一個15px的左填充。

相反，它可能是更好的做到以下幾點：

<div class="row"> 

    // First Column 
    <div class="col-xs-2"> 
    <!-- select list --> 
    <div> 

    // Second Column 
    <div class="col-xs-10"> 

     <div class="row"> 

      <!-- 4 to divide the grid into 3 equal parts --> 
      <div class="col-xs-4"> 
      </div> 

      <div class="col-xs-4"> 
      </div> 

      <div class="col-xs-4"> 
      </div> 

     </div> 

     <div class="row"> 
     <div class="col-xs-12"> 
      <!-- Your text here --> 
     </div> 
     </div> 

     <div class="row"> 
     <div class="col-xs-12"> 
      <!-- Your other list box here --> 
     </div> 
     </div> 

    </div> 
</div>