css - Twitter bootstrap 可更改的垂直/水平形式布局，只需少量修改

Question

我正在制作一个有很多表单的应用程序，一想到要为棘手的垂直对齐表单和水平对齐表单引用表单引用，我就感到疲倦。

当我想要垂直和水平形式时，我想要一个最终片段作为我的引用点。

对于垂直形式(垂直对齐的形式)我使用此代码

https://jsfiddle.net/bgebzwqd/11/

<form role="form">
       <div class="form-group">
          <label for="name">First name</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group">
          <label for="address">Second name</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group">
          <label for="email">Email</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group">
          <label for="pwd">Password</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group col-md-4">
         <button type="submit" class="btn btn-default">Register</button>
       </div>
    </form>

对于水平形式我有这个

https://jsfiddle.net/0jwzxoe2/20/

<form role="form">
<div class="form-group">
            <div class="col-xs-3">
              <label class="control-label">One</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3">
              <label class="control-label ">Two</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3">
              <label class="control-label ">Three</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
             <div class="col-xs-3">
              <label class="control-label ">Four</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
             <div class="col-xs-3">
              <label class="control-label ">Five</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3">
                <button type="submit" class="btn btn-default">Register</button>
            </div>
        </div>
    </form>

在第一种形式(垂直形式)中，我如何控制形式 Bootstrap 方式的宽度(尝试并避免自定义 css)

在第二个中，我希望按钮位于底部，并且在垂直方向上也有一些间距。在当前示例中，似乎没有空格。

为了解决这个问题，我想避免使用自定义 css 并尝试使用仅在 bootstrap 中可用的内容来解决这个问题。

Answer 1

使用下面的代码

<form role="form">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3">
           <div class="form-group">
              <label for="name">First name</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
           </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3">
           <div class="form-group">
              <label for="address">Second name</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
           </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3">
           <div class="form-group">
              <label for="email">Email</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
           </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-3">
           <div class="form-group">
              <label for="pwd">Password</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
           </div>
        </div>
        <div class="col-xs-12">
           <div class="form-group col-md-4">
             <button type="submit" class="btn btn-default">Register</button>
           </div>
        </div>
    </div>
 </form>