Bootstrap CSS排队按钮带输入

Question

我正在尝试将输入旁边的按钮排成一行，但这样做很麻烦。我是新手用bootssrap css和css一般会有人请告诉我我哪里出错了。

http://jsfiddle.net/5N6FQ/404/

我的搜索和新按钮没有按照我的意愿排列。非常感谢任何帮助。

Iv尝试了什么：

它应该是什么样的：

HTML：

<div class="row">
  <div class="col-md-1"></div>

    <div class="col-xs-2">
        <label for="ItemID">ITEM ID</label>
        <input class="form-control" type="text" name="ItemID" id="ItemID" /> 
    </div>

    <div class="col-xs-1">
        <input class="btn btn-default" type="button" name="Search" id="Search" value="Search">
    </div>

    <div class="col-xs-2">
        <label for="Qty">QTY</label>
        <select name="Qty" id="Qty" class="form-control">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
        </select>

    </div>
</div>

<div class="row">
  <div class="col-md-1"></div>

    <div class="col-xs-4">
    <label for="Dealers"></label>
        <select name="Dealers" id="Dealers" class="form-control">
            <option value="" selected></option>
            <option value="1">1</option>
        </select>
    </div>

    <input class="btn btn-default" type="button" name="New" value="NEW">

</div>

<div class="row">
  <div class="col-md-1"></div>

    <input class="btn btn-default" type="button" name="Report" value="REPORT">

    <input class="btn btn-default" type="button" name="PrintLabels" value="PRINT LABELS">

    <input class="btn btn-default" type="button" name="LogItIn" value="LOG IT IN">

    <input class="btn btn-default" type="button" name="CompleteIt" value="COMPLETE IT">

    <input class="btn btn-default" type="button" name="Exit" value="EXIT">

</div>

CSS：

#ItemID, #Search { display: inline-block; }

Answer 1

您可能需要查看Input Groups以将按钮添加到输入字段。

＆＃13;

＆＃13;

#btn-inputs {
  text-align: center;
  margin-top: 15px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <label for="ItemID">ITEM ID</label>
      <div class="input-group">
        <input type="text" class="form-control" name="ItemID" id="ItemID"> <span class="input-group-btn">
        <input class="btn btn-default" type="button" name="Search" id="Search" value="Search"/>
      </span>

      </div>
      <!-- /input-group -->
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-xs-6">
      <label for="Qty">QTY</label>
      <select name="Qty" id="Qty" class="form-control">
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <label for="Dealers"></label>
      <div class="input-group">
        <select name="Dealers" id="Dealers" class="form-control">
          <option value="" selected></option>
          <option value="1">1</option>
        </select> <span class="input-group-btn">
        <input class="btn btn-default" type="button"  name="New" value="NEW" />
      </span>

      </div>
      <!-- /input-group -->
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12" id="btn-inputs">
      <div class="btn-group" role="group" aria-label="...">
        <input class="btn btn-default" type="button" name="Report" value="REPORT">
        <input class="btn btn-default" type="button" name="PrintLabels" value="PRINT LABELS">
        <input class="btn btn-default" type="button" name="LogItIn" value="LOG IT IN">
        <input class="btn btn-default" type="button" name="CompleteIt" value="COMPLETE IT">
        <input class="btn btn-default" type="button" name="Exit" value="EXIT">
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

表单上的所有元素都应该在col- *类中。

例如，您的＆＃39; New＆＃39;按钮应该是：

<div class="row">
  <div class="col-md-1"></div>

    <div class="col-xs-4">
      <label for="Dealers">Dealers</label>
        <select name="Dealers" id="Dealers" class="form-control">
            <option value="" selected></option>
            <option value="1">1</option>
        </select>
    </div>
    <div class="col-xs-4">
      <label></label>
      <input class="btn btn-default" type="button" name="New" value="NEW">
    </div>

</div>

在这种情况下，请确保不使用表单标记上的form-inline类，因为它会尝试将您的标签与输入字段内联。

Answer 3

看这个小提琴＆gt;＆gt; http://jsfiddle.net/kwxm3n9n/

使用col-heading和col-bottom定位相同的col- - （s）。

<div class="container">
  <div class="col-sm-9"></div> <<-- left 
  <div class="col-sm-3"><div> <<-- right
</div>

现在我们可以构建其余的表格了。

<div class="col-sm-9">
  <div class="row"></div> <<-- first row (item, search, qty)
  <div class="row"></div> <<-- for select
  <div class="row"></div> <<-- for tables
  <div class="row"></div> <<-- for buttons
</div>

将行用于同一版本的右侧。