Bootstrap：当大小变得超小时，在表单元素上完成左边距，右边距？

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-horizontal"更改为class="form-vertical" ....

即可

样本：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;