Question

我正在尝试使用bootstrap在屏幕上添加标签和文本框，但它没有内联。不知道我在这里做错了什么。我需要使用它吗？

 <div class="form-horizontal">
     <div class="control-group row-fluid form-inline">
                     <label for="name" class="control-label">eReview #</label>
       <div class="controls">
                     <input type="text" id="name"  class="form-control">
       </div>
     </div>
 </div>

请帮助!!

Answer 1

您从未在col-*-*和label字段上设置.controls课程：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-horizontal">
  <div class="control-group form-inline">
    <label for="name" class="control-label col-xs-3">eReview #</label>
    <div class="controls col-xs-9">
      <input type="text" id="name" class="form-control">
    </div>
  </div>
</div>

＆＃13;

您可以使用*-xs-*课程来使其适合您的页面。

Answer 2

row-fluid仅适用于Bootstrap 2.3.2

如果你的引导版本是2.3.2，你的代码是好的。

 <div class="form-horizontal">
 <div class="control-group row-fluid form-inline">
                 <label for="name" class="control-label">eReview #</label>
   <div class="controls">
                 <input type="text" id="name"  class="form-control">
   </div>
 </div>

如果您使用的是Bootstrap v3，则必须使用bootstrap col- *类。

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="form-horizontal">
  <div class="control-group form-inline">
    <label for="name" class="control-label col-xs-4">eReview #</label>
 <div class="controls col-xs-8">
      <input type="text" id="name" class="form-control">
    </div>
  </div>
</div>

＆＃13;

Answer 3

如果您使用的是bootstrap 3，那么下面的代码会帮助您解决问题。

<div class="form-horizontal">
     <div class="form-group row">
      <label for="name" class="control-label col-md-4">eReview #</label>
       <div class="col-md-8">
        <input type="text" id="name"  class="form-control" />
       </div>
     </div>
 </div>

或者你可以在这里查看 http://getbootstrap.com/css/#forms

使用bootstrap在单行中的标签和文本框

3 个答案: