Question

以下是我的代码：

<div class="modal-body-scrolled border-primary border-bottom p-0 mt-2">
   <div class="form-row">
      <div class="col-12">
         <div class="row ml-0 mr-0">
            <div class="row form-inline col-12 mt-2 mb-2 pt-2 pb-2 m-0">
               <div class="row col-12 mb-2">
                  <div class="col-2 spacer"></div>
                  <div class="col-10 pl-0 d-inline">
                     <input type="text" class="form-control form-control-sm d-inline" style="width: 40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-12">
         <div class="row ml-0 mr-0 mb-3">
            <label for="date" class="col-2 pl-0 justify-content-start align-items-start">Event:</label>
            <select type="field" class="form-control form-control-sm ml-2" style="width:500px" v-model="keyEvent">
               <option value="" disabled selected>(select)</option>
            </select>
         </div>
         <div class="row ml-0 mr-0 mb-3">
            <label for="date" class="col-2 pl-0 justify-content-start align-items-start">Date:</label>
            <div class="col-2 pl-0 d-inline">
               <input class="form-control">
            </div>
         </div>
      </div>
   </div>
</div>

我正在使用标准的Bootstrap 12列布局，第一列设置为col-2，第二列设置为col-10。

我认为那将意味着我的元素完全左对齐，但它们没有对齐。

如何使元素左对齐/彼此齐平？

Answer 1

<div>
  <div class="row mb-1">
      <div class="col-2"></div>
      <div class="col-10"> <input type="text" class="form-control form-control-sm d-inline" style="width:             40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
      </div>
  </div>


  <div class="row mb-1">
    <div class="col-2">
                  <label for="date" class="">Event:</label>

    </div>
    <div class="col-10">
      <select type="field" class="form-control form-control-sm" style="width:500px" v-model="keyEvent">
               <option value="" disabled selected>(select)</option>
            </select>
    </div>
  </div>


  <div class="row mb-1">
    <div class="col-2">
       <label for="date" class="">Date:</label>
    </div>
    <div class="col-10">
       <input class="form-control" style="width: 140px">
    </div>
  </div>
</div>

尝试这种结构，它简单而简短，也会为您提供帮助

Answer 2

更改了结构：

您提到的

col-2将带有标签 col-8将具有输入

请确保将col包裹在各自的row中

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body-scrolled">
  <div class="container">
    <div class="row">
      <div class="col-2">
        Label
      </div>
      <div class="col-8">
        <input type="text" class="form-control form-control-sm d-inline" style="width: 40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
      </div>
    </div>
    <div class="row">
      <div class="col-2">
        Event:
      </div>
      <div class="col-8">
        <select type="field" class="form-control form-control-sm" style="width:500px" v-model="keyEvent">
          <option value="" disabled selected>(select)</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-2">
        Date:
      </div>
      <div class="col-8">
        <div class="col-2 pl-0 d-inline">
          <input class="form-control">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

我们可以用更简单的方式编写它，

仅使用普通的网格类，您会使标记太复杂

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="padding: 20px;">

<div class="row mb-3">
  <div class="col-2">
    <label class="label">Label</label>
  </div>
  <div class="col-10">
    <input class="form-control" style="width:100px;display:inline-block;" />
    <label class="label" style="display:inline-block;">days</label>
  </div>
</div>

<div class="row mb-3">
  <div class="col-2">
    <label class="label">Label</label>
  </div>
  <div class="col-10">
    <select type="field" class="form-control">
      <option value="" disabled selected>(select)</option>
      <option value="" >option 1</option>
    </select>    
  </div>
</div>

<div class="row mb-3">
  <div class="col-2">
    <label class="label">Label</label>
  </div>
  <div class="col-10">
    <input class="form-control" style="width:100px;display:inline-block;" />
  </div>
</div>


</div>

在Bootstrap中，如何使元素完全左对齐？

3 个答案: