Question

我想在bootstrap div中正确对齐控件，使它们看起来像

目前行和margin-bottom之间存在很大差距或填充似乎不起作用。另外，如何展开列表框以完全覆盖屏幕长度？它看起来像

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在左侧和右侧添加了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>

Answer 2

经过大量的高度，宽度，填充和边距的硬编码，我能够达到目标。（另外，如果我在第二列的第一行设置了col-xs-4，那么按钮总是在下一行。所以我已经将col总和减少到9.我猜10也没问题）{{3} }

这是标记

 <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>

如何正确定位bootstrap html div

2 个答案: