html - 使 Bootstrap 表单内联并更好地布局

Question

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

从本质上帮助我使我的形式更美观。

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

此外，您可以应用多种列类型

对于单选选项尝试这样的事情

<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 类可以帮助您

希望对您有所帮助!