Question

Bootstrap新手，尝试了很多东西，但无法在文本区域上方将文本框和标签垂直对齐。

<div class="container">
   <div class="panel panel-primary">
      <div class="panel-heading">Estimate ID: 265</div>
      <div class="panel-body">
<div class="form-inline ">
    <div class="form-group">
      <label for="email">Job Title:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter Title">
    </div>
    <div class="form-group">
      <label for="pwd">Location:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter Location">
    </div>
    <div class="form-group">
      <label for="email">Approved Reference:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter Reference">
    </div>

  </div>



    <div class="form-group">
  <label for="comment">Description:</label>
  <textarea class="form-control" rows="5" placeholder="Not more than 100 characters" id="comment"></textarea>
</div>


http://jsfiddle.net/6xH5s/66/

我是否应该添加自定义css，是否使用bootstrap css文件无法实现？

Answer 1

作为新手，你应该阅读bootstrap documentation并了解他们的网格系统，这非常有用。

您的solution。

   <style>
h2 {
    margin-top: -1px;
}


</style>

<div class="container">
<div class="row">


   <div class="panel panel-primary">
      <div class="panel-heading">Estimate ID: 265</div>
      <div class="panel-body">
<div class="form-inline ">
    <div class="form-group col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <label for="email">Job Title:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter Title">
    </div>
    <div class="form-group col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <label for="pwd">Location:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter Location">
    </div>
    <div class="form-group col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <label for="email">Approved Reference:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter Reference">
    </div>
</div>
  </div>


    <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 text-left">
  <label for="comment">Description:</label>
  <textarea class="form-control" rows="5" placeholder="Not more than 100 characters" id="comment"></textarea>
</div>




</div>
    </div>

</div>

排列文本框和标签垂直引导

1 个答案: