使Bootstrap形式内联并更好地布局

Question

我对bootstrap很新，我已经构建了以下表单，但是我想知道是否有人可以帮助我并帮助我使这个表单更加内联，因为我认为从布局的角度来看有一个更好的方法，但我真的不知道如何实现它，我会感激所有的帮助。

基本上帮助我让我的形式更美观。

HTML：

<!-- Form Name -->
<legend>Order Form</legend>
<form class="form-horizontal form-shadow">
<fieldset>


<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="email">E-mail</label>  
  <div class="col-md-4">
  <input id="email" name="email" type="text" placeholder="Enter E-mail" class="form-control input-md" required="">

  </div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="tile">Select Title</label>
  <div class="col-md-4">
    <select id="tile" name="tile" class="form-control">
      <option value="Miss">Miss</option>
      <option value="Mr">Mr</option>
      <option value="Mrs">Mrs</option>
      <option value="Ms">Ms</option>
      <option value="Dr">Dr</option>
      <option value="Rev">Rev</option>
      <option value="Other">Other</option>
    </select>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="name">Name</label>  
  <div class="col-md-4">
  <input id="name" name="name" type="text" placeholder="Enter Name" class="form-control input-md" required="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="surname">Surname</label>  
  <div class="col-md-4">
  <input id="surname" name="surname" type="text" placeholder="Enter Surname" class="form-control input-md" required="">

  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="address">Address</label>
  <div class="col-md-4">                     
    <textarea class="form-control" id="address" name="address" placeholder="Enter Address"></textarea>
  </div>
</div>

<!-- Prepended text-->
<div class="form-group">
  <label class="col-md-4 control-label" for="cell"></label>
  <div class="col-md-4">
    <div class="input-group">
      <span class="input-group-addon">Cell</span>
      <input id="cell" name="cell" class="form-control" placeholder="Enter Cellphone" type="text" required="">
    </div>

  </div>
</div>

<!-- Prepended text-->
<div class="form-group">
  <label class="col-md-4 control-label" for="fax"></label>
  <div class="col-md-4">
    <div class="input-group">
      <span class="input-group-addon">Fax</span>
      <input id="fax" name="fax" class="form-control" placeholder="Enter Fax" type="text" required="">
    </div>

  </div>
</div>

这就是它现在的样子：

这是我想要的效果：

Answer 1

表格形式 对于输入我认为你可以使用col-md-6或8

另外，您可以应用多种col类型

对于无线电选项尝试类似这样的

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>.

并且总是如果你不喜欢背景颜色，你可以在你自己的CSS文件中更改它，你甚至可以使用相同的类来引导和你的css（bootstrap只是那个，一个css）< / p>

另外，PULL-RIGHT和PULL-LEFT类可以帮助你

希望这可以帮到你！