Question

我正在使用引导程序4设置表单，但各列不对齐，从而形成了不必要的空间并减小了输入框的大小。

我尝试使用不同的Bootstrap CSS CDN代码，但下载的代码仍然存在。

<!------ Begin Description Section ------->
<div id="Description_details" class="container">
<div class="row">
  <div class="step body current" id="trade-steps-p-2" role="tabpanel" aria-labelledby="" aria-hidden="false"
    style="display: block;">
    <fieldset class="trade">
      <legend>What are you Buying?</legend>
      <div class="form-group col-md-6 required" aria-required="true">
        <label for="ContractName">Give Your Trade a Name
          <a href="#" data-toggle="popover" data-trigger="hover" data-content=" data-original-title="" title="">
              <i class=" fa fa-question-circle"></i>
          </a>
        </label>
        <input name="data[Contract][name]" class="form-control" maxlength="50" type="text" id="ContractName"
          required="required" aria-required="true" aria-invalid="false">
      </div>

      <div class="form-group col-md-6 required" aria-required="true">
        <label for="">Industry Classification</label>
        <select name="data[Contract][industry]" class="form-control" id="" required="required" aria-required="true"
          aria-invalid="false">
          <option value="GENERAL_GOODS_SERVICES" selected="selected">General Goods &amp; Services</option>
          <option value="AGRICULTURE_LIVESTOCK_GAME">Agriculture, Livestock &amp; Game</option>
          <option value="ART_ANTIQUES_COLLECTIBLES">Art, Antiques &amp; Collectibles</option>
          <option value="BUSINESS_SALE_BROKING">Business Sale &amp; Broking</option>
          <option value="VEHICLES_WATERCRAFT">Cars, Bikes &amp; Watercraft</option>
          <option value="CONSTRUCTION">Construction</option>
        </select>
      </div>
  </div>
</div>

要使输入区域在左侧和右侧分别与col-md-6对齐。

Answer 1

设置该类别的自定义边距

. col-md-6 {
 margin: 5px !important;
}

希望这会起作用。

Answer 2

您使用的是col-md-6，这就是输入字段不适合该行的原因。您应该使用col-lg-12或col-md-12。在Bootstrap 4 grid system

中查看文档，了解网格系统的工作原理

Answer 3

这是我使用[dir='rtl'] mat-header-cell { border-left: dashed; } [dir='ltr'] mat-header-cell { border-right: dashed; }使用完整宽度的解决方案。我的提示是总是从小屏幕开始，在该屏幕上我使用了w-100。当屏幕变大时，它们可以与col-12并排放置。

col-md-6

如何修复不对齐的Bootstrap列网格？

3 个答案: