Question

我在项目中使用Bootstrap 3。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row well well-sm">
  <div class="col-xs-2">
    <label for="txtMonth"> month:</label>
    <input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" />
  </div>
  <div class="col-xs-3">
    <label for="txtMonth"> year:</label>
    <input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
  </div>
  <div class="col-xs-2">
    <input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
  </div>
</div>

正如您可以看到每个输入数字都有标签，但标签和输入不在同一行上如何使标签和输入显示在一行？

Answer 1

在您的标签中使用col-xs-4 [标签]并为col-xs-8创建新的div [输入div]

   
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
       
        <div class="row well well-sm">
            <div class="col-xs-5">
              <label class="col-xs-4" for="txtMonth"> month:</label>
                <div class="col-xs-8">
                      <input type="number"  class="form-control input-sm" id="txtMonth" ng-model="month" />
                </div>
            </div>
            <div class="col-xs-5">
                <label class="col-xs-4" for="txtMonth"> year:</label>
                <div class="col-xs-8">
                     <input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
                </div>
            </div>
            <div class="col-xs-2">
                <input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
            </div>
        </div>

Answer 2

只需使用 form-inline 将标签和输入内联，如下所示。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-inline">
  <div class="well well-sm">
    <div class="form-group">
      <label for="txtMonth"> month:</label>
      <input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" />
    </div>
    <div class="form-group">
      <label for="txtMonth"> year:</label>
      <input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
    </div>
    <div class="form-group">
      <input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
    </div>
  </div>
</form>

Answer 3

您需要将Code包装成CSS类form-group的div，如下所示：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    
<div class="row well well-sm">
    
            <div class="form-group">
                <label class="col-xs-2" for="txtMonth"> month:</label>
                <div class="col-xs-2">
                    <input type="number" class="form-control input-sm" id="txtMonth" ng-model="month"/>
                </div>
    
                <label class="col-xs-2" for="txtMonth"> year:</label>
                <div class="col-xs-2">
                    <input type="number" class="form-control input-sm" id="txtYear" ng-model="year"/>
                </div>
    
                <input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter"/>
            </div>
        </div>

＆＃13;

Answer 4

这是因为form-control类具有width:100%和display:block属性。如果你覆盖这个会自动运作的那个。

同时增加用于修复同一行中的标签和文本框的xs值。

应用一些新类并覆盖以下属性，如下所示。

 .newclass {
     display:inline-block;
     width:auto;
  }


  <div class="row well well-sm">
        <div class="col-xs-5">
          <label for="txtMonth"> month:</label>
            <input type="number"  class="form-control newclass input-sm" id="txtMonth" ng-model="month" />
        </div>
        <div class="col-xs-5">
            <label for="txtMonth"> year:</label>
            <input type="number" class="form-control newclass input-sm" id="txtYear" ng-model="year" />
        </div>
        <div class="col-xs-2">
            <input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
        </div>
    </div>

DEMO

Answer 5

希望它能运作

＆＃13;

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-12">
    <label for="txtMonth" class="col-xs-2"> month:</label>
    <label for="txtMonth" class="col-xs-3"> year:</label>
    <div class="col-xs-7">
    </div>
</div>
<div class="col-xs-12">
<div class="col-xs-2">
    <input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" />
</div>
<div class="col-xs-3">
    <input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
</div>
<div class="col-xs-2">
    <input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
</div>
<div class="col-xs-5">
</div>
</div>

＆＃13;

如何在同一行上制作标签和输入？

5 个答案: