如何使用Bootstrap 4对齐嵌套表格行？

时间：2019-07-02 06:02:51

标签： html css twitter-bootstrap bootstrap-4

我有一个嵌套的表单行，想垂直对齐表单字段。当前的输出是这样的：

enter image description here

代码在这里：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
 <div class="card">
      <div class="card-body">
    
        <div class="form-group row">
          <label for="name" class="col-sm-3 col-form-label">Name</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="name" disabled>
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-3 col-form-label">Description</label>
          <div class="col-sm-9">
            <textarea class="form-control" id="description" rows="5" disabled></textarea>
          </div>
        </div>
        
        <div class="form-group row">
          <div class="col-sm-7">
            <div class="form-group row">
              <label for="description" class="col-sm-5 col-form-label">Rate</label>
              <div class="col-sm-7">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="form-group row">
              <label for="description" class="col-sm-5 col-form-label">Start date</label>
              <div class="col-sm-7">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="form-group row">
              <label for="description" class="col-sm-5 col-form-label">End date</label>
              <div class="col-sm-7">
                <input type="text" class="form-control">
              </div>
            </div>
          </div>
          
          <div class="col-sm-5">
            <div class="promotion-image-container">
              <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
            </div>
          </div>
        </div>
        
      </div>
    </div>

如您所见，列中有轻微的未对齐。我有一张要与其他3个字段对齐的图像。

我尝试调整列号，但无法使其正确对齐。

任何帮助将不胜感激。

3 个答案:

答案 0 :(得分：1)

只需为padding-left:24px !important添加自定义样式div class='col-sm-7 padd-left'即可，

@media only screen and (min-width: 768px) {
  .padd-left{
      padding-left:24px !important
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <div class="card">
  <div class="card-body">

    <div class="form-group row">
      <label for="name" class="col-sm-3 col-form-label">Name</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" id="name" disabled>
      </div>
    </div>
    <div class="form-group row">
      <label for="description" class="col-sm-3 col-form-label">Description</label>
      <div class="col-sm-9">
        <textarea class="form-control" id="description" rows="5" disabled></textarea>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-7">
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label">Rate</label>
          <div class="col-sm-7 padd-left">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label">Start date</label>
          <div class="col-sm-7 padd-left">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label">End date</label>
          <div class="col-sm-7 padd-left">
            <input type="text" class="form-control">
          </div>
        </div>
      </div>

      <div class="col-sm-5">
        <div class="promotion-image-container">
          <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
        </div>
      </div>
    </div>

  </div>
</div>

答案 1 :(得分：1)

问题是<label> Elmenets没有相同的width。您在前两个中使用了.col-sm-3，在后三个中使用了.col-ms-5。即使对所有它们使用相同的.col-*，由于最后三个嵌套，它们的宽度仍将不同。 （检查第一个代码段）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="card">
  <div class="card-body">

    <div class="form-group row">
      <label for="name" class="col-sm-3 col-form-label bg-danger">Name</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" id="name" disabled>
      </div>
    </div>
    <div class="form-group row">
      <label for="description" class="col-sm-3 col-form-label bg-danger">Description</label>
      <div class="col-sm-9">
        <textarea class="form-control" id="description" rows="5" disabled></textarea>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-7">
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label bg-danger">Rate</label>
          <div class="col-sm-7">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label bg-danger">Start date</label>
          <div class="col-sm-7">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label bg-danger">End date</label>
          <div class="col-sm-7">
            <input type="text" class="form-control">
          </div>
        </div>
      </div>

      <div class="col-sm-5">
        <div class="promotion-image-container">
          <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
        </div>
      </div>
    </div>
  </div>
</div>

我的建议是为每个<label>元素使用一个容器，并将.col-sm-auto和.col-12直接应用于该容器。然后，为<label>设置一个固定宽度，以使它们都具有相同的宽度。您可以使用媒体查询根据视口大小设置不同的宽度。

在.col-sm和<input>容器上使用<textarea>，以便它们占用所有可用空间。在手机上使用.col-12。

@media (min-width: 576px) {
  label {
    width: 200px !important;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="card">
  <div class="card-body">
    <div class="form-group row">
      <div class="col-12 col-sm-auto bg-primary">
        <label for="name" class="col-form-label">Name</label>
      </div>
      <div class="col-sm col-12">
        <input type="text" class="form-control" id="name" disabled>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-12 col-sm-auto bg-primary">
        <label for="description" class="col-form-label">Description</label>
      </div>
      <div class="col-12 col-sm">
        <textarea class="form-control" id="description" rows="5" disabled></textarea>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-12 col-sm-7">
        <div class="form-group row">
          <div class="col-12 col-sm-auto bg-primary ">
            <label for="description" class="col-form-label">Rate</label>
          </div>
          <div class="col-12 col-sm">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <div class="col-12 col-sm-auto bg-primary">
            <label for="description" class="col-form-label">Start date</label>
          </div>
          <div class="col-12 col-sm">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <div class="col-12 col-sm-auto bg-primary">
            <label for="description" class="col-form-label ">End date</label>
          </div>
          <div class="col-12 col-sm">
            <input type="text" class="form-control">
          </div>
        </div>
      </div>

      <div class="co-12 col-sm-5">
        <div class="promotion-image-container">
          <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/RzMzpR

答案 2 :(得分：0)

您可以尝试我的代码吗？我修改了一些代码：

<div class="card">
    <div class="card-body">
        <div class="form-group row">
            <label for="name" class="col-sm-3 col-form-label">Name</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="name" disabled>
            </div>
        </div>
        <div class="form-group row">
            <label for="description" class="col-sm-3 col-form-label">Description</label>
            <div class="col-sm-9">
                <textarea class="form-control" id="description" rows="5" disabled></textarea>
            </div>
        </div>
        <div class="form-group row">
            <div class='col-3'>
                <div class="form-group"><label for="description" class="col-form-label">Rate</label></div>
                <div class="form-group"><label for="description" class="col-form-label">Start date</label></div>
                <div class="form-group">
                    <label for="description" class="col-form-label">End date</label>
                </div>
            </div>
            <div class='col-4'>
                <div class="form-group">
                    <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control datepicker">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control datepicker">
                </div>
            </div>
            <div class='col-5'>
                <div class="promotion-image-container">
                    <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
                </div>
            </div>
        </div>
    </div>
</div>

这是一个演示链接：https://codepen.io/phuongnm153/pen/zVWevP

相关问题
最新问题