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

这就是现在的样子：


这就是我想要的效果：

最佳答案

与周围的形式
对于输入，我认为您可以使用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文件中进行更改，甚至可以对Bootstrap和CSS使用相同的类（bootstrap就是CSS）

此外，PULL-RIGHT和PULL-LEFT类也可以为您提供帮助

希望这可以帮到你！