Twitter引导可更改的垂直/水平表单布局，几乎没有修改

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>

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

在第二个中，我想将按钮放在底部，并且还具有一些垂直间距。在当前示例中，似乎没有空格。

为了解决这个问题，我想避免使用自定义 css，并尝试仅使用引导程序中可用的功能来解决此问题。

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>

Answer 2

我最终为垂直表单做了这个

https://jsfiddle.net/codebreaker87/zqjva21d/

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
  <style>.width500{width:500px;margin-left:30px;}</style>
                                      <form role="form">
                                        <div class="row">
       <div class="form-group  width500">
          <label for="name">First name</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group  width500 ">
          <label for="address">Second name</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group  width500">
          <label for="email">Email</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group  width500">
          <label for="pwd">Password</label>
          <input type="name" class="form-control" id="fname" placeholder="Enter name">
       </div>
       <div class="form-group  width500">
         <button type="submit" class="btn btn-default">Register</button>
       </div>
     </div>
    </form>
    </div>

对于水平形式 https://jsfiddle.net/codebreaker87/zqjva21d/21/

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<form role="form">
<div class="form-group">
<style>.mb{margin-bottom:20px;}.ml{margin-left:15px;}</style>
            <div class="col-xs-3 mb">
              <label class="control-label">One</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3 mb">
              <label class="control-label ">Two</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3 mb">
              <label class="control-label ">Three</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
             <div class="col-xs-3 mb">
              <label class="control-label ">Four</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
             <div class="col-xs-3 mb">
              <label class="control-label ">Five</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
              <div class="col-xs-3 mb">
              <label class="control-label ">Six</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
        </div>
        <div class="row">
         <div class="col-md-12 ml ">
                <button type="submit" class="btn btn-default">Register</button>
            </div>
        </div>
    </form>
    </div>