html - 当尺寸变得超小时， Bootstrap : Accomplish left-, 表单元素的右边距？

Question

我已经制作了这种形式，它在所有大于 xs(特小)的尺寸上表现和看起来都不错。

.row {
  margin-bottom: 20px;
}

.row:first-of-type {
  margin-top: 40px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <form action="" method="GET" role="form" class="form-horizontal">
        <div class="row">
          <legend>Form title</legend>
        </div>
        <div class="row">
          <div class="form-group">
            <label for="first-name" class="col-sm-2">Your First Name: </label>
            <div class="col-sm-4">
              <input type="text" class="form-control" id="first-name" placeholder="Please enter your first name.">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group">
            <label for="last-name" class="col-sm-2">Your Last Name: </label>
            <div class="col-sm-4">
              <input type="text" class="form-control" id="last-name" placeholder="Please enter your last name.">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="form-group">
            <label for="email" class="col-sm-2">Your Email: </label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="email" placeholder="Please enter your email adresse.">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group">
            <label for="phone" class="col-sm-2">Your Phone Number: </label>
            <div class="col-sm-3">
              <input type="text" class="form-control" id="phone" placeholder="Please enter your phone number.">
            </div>
          </div>
        </div>
        <div class="row">
          <button type="submit" class="col-sm-1 btn btn-primary">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

但是当显示变得特别小时，输入和标签会延伸到浏览器窗口的边缘。

我想在左边和右边留一点边距。

我是不是做错了什么？

有没有办法只用 Bootstrap 来解决这个问题？还是我必须添加一些额外的 CSS？

Answer 1

一个非常简单的解决方案。其实是误会。只需将 class="form-horizo​​ntal" 更改为 class="form-vertical" ....

演示:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <form action="" method="GET" role="form" class="form-vertical">
        <div class="row">
          <legend>Form title</legend>
        </div>
        <div class="row">
          <div class="form-group">
            <label for="first-name" class="col-sm-2">Your First Name: </label>
            <div class="col-sm-4">
              <input type="text" class="form-control" id="first-name" placeholder="Please enter your first name.">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group">
            <label for="last-name" class="col-sm-2">Your Last Name: </label>
            <div class="col-sm-4">
              <input type="text" class="form-control" id="last-name" placeholder="Please enter your last name.">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="form-group">
            <label for="email" class="col-sm-2">Your Email: </label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="email" placeholder="Please enter your email adresse.">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group">
            <label for="phone" class="col-sm-2">Your Phone Number: </label>
            <div class="col-sm-3">
              <input type="text" class="form-control" id="phone" placeholder="Please enter your phone number.">
            </div>
          </div>
        </div>
        
          <button type="submit" class="col-sm-1 btn btn-primary">Submit</button>
        
      </form>
    </div>
  </div>
</div>