html - 如何使用 bootstrap 排列输入字段？

Question

我认为我不太了解 bootstrap 如何与网格一起工作。我希望 name 和 actual 字段匹配，除非屏幕大小为 xs，因此每个字段都是自己的行。对于每一行，我希望文本框始终对齐。

这是我尝试过的。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="width:80vw">

  <form role="form">
    <div class="row top-buffer">
      <div class="col-sm-4 ">
        <div class="form-group">
          <label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
          <div class="col-sm-8">
            <input type="date" class="form-control" id="inputLabel3" placeholder="date">
          </div>
        </div>
      </div>
      <div class="col-sm-4 ">
        <div class="form-group">
          <label for="inputname" class="col-sm-4 control-label">Name:</label>
          <div class="col-sm-8 ">
            <input type="text" class="form-control" id="name" placeholder="name">
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label for="inputPassword" class="col-sm-3   control-label">Initials:</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" id="inputInitials" placeholder="Initials">
          </div>
        </div>
      </div>

    </div>

    <div class="row top-buffer">
      <div class="col-sm-12">
        <div class="form-group">
          <label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
          <div class="col-sm-10 ">
            <input type="text" class="form-control" id="inputLabel3" placeholder="title">
          </div>
        </div>
      </div>
    </div>



    <div class="row top-buffer">
      <div class="col-sm-5">
        <div class="form-group">
          <label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
          <div class="col-sm-10 ">
            <input type="number" class="form-control" id="inputLabel3" placeholder="title">
          </div>
        </div>
      </div>


      <div class="col-sm-5">
        <div class="form-group">
          <label for="Actual" class="col-sm-2 control-label">Actual:</label>
          <div class="col-sm-10 ">
            <input type="number" class="form-control" id="inputLabel3" placeholder="title">
          </div>
        </div>
      </div>
    </div>
</div>


<div class="row top-buffer">
  <div class="col-sm-12">
    <div class="form-group">
      <label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
      <div class="col-sm-10 ">
        <textarea id="descript" class="col-sm-10 "></textarea>
      </div>
    </div>
  </div>
</div>
</div>
<!-- end container -->
</div

如果有人能帮助我扩大描述字段，则可加分 - 高度足以容纳至少 20 行新行。

Answer 1

这包括描述中额外的 20 个空格 将此添加到您的 .css

     .col-sm-4 {
     display: inline-block;
     vertical-align: middle;
     float: none;
     }

    <div class="container" style="width:80vw">
        
          <form role="form">
            <div class="row top-buffer">
              <div class="col-sm-4 ">
                <div class="form-group">
                  <label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
                  <div class="col-sm-8">
                    <input type="date" class="form-control" id="inputLabel3" placeholder="date">
                  </div>
                </div>
              </div>
              <div class="col-sm-4 ">
                <div class="form-group">
                  <label for="inputname" class="col-sm-4 control-label">Name:</label>
                  <div class="col-sm-8 ">
                    <input type="text" class="form-control" id="name" placeholder="name">
                  </div>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="form-group">
                  <label for="inputPassword" class="col-sm-3   control-label">Initials:</label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control" id="inputInitials" placeholder="Initials">
                  </div>
                </div>
              </div>
        
            </div>
        
            <div class = "row top-buffer">
              <div class="col-sm-12">
                <div class="form-group">
                  <label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
                  <div class="col-sm-10 ">
                    <input type="text" class="form-control" id="inputLabel3" placeholder="title">
                  </div>
                </div>
              </div>
            </div>
        
        
        
            <div class = "row top-buffer">
              <div class="col-sm-5">
                <div class="form-group">
                  <label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
                  <div class="col-sm-10 ">
                    <input type="number" class="form-control" id="inputLabel3" placeholder="title">
                  </div>
                </div>
              </div>
        
        
               <div class="col-sm-5">
                <div class="form-group">
                  <label for="Actual" class="col-sm-2 control-label">Actual:</label>
                  <div class="col-sm-10 ">
                    <input type="number" class="form-control" id="inputLabel3" placeholder="title">
                  </div>
                </div>
              </div>
            </div>
          </div>
        
        
                  <div class = "row top-buffer">
              <div class="col-sm-12">
                <div class="form-group">
                  <label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
                  <div class="col-sm-10 ">
                    <textarea id="descript"  class="col-sm-10" rows="20"></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end container -->
          </div