引导输入与按钮对齐答案

【问题标题】：bootstrap input aligned with button引导输入与按钮对齐
【发布时间】：2014-01-10 23:26:05
【问题描述】：

我试图在同一行：文本、搜索框和“定位”按钮，但以下代码似乎不起作用，因为我得到的是：文本“网络地图...”与输入框，而“定位”按钮位于输入框下方。有什么建议吗？

<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
  <!-- Default panel contents -->
  <div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">
    <div class="input-group">
      <label class="control-label col-lg-8">Map for Network<p class="badge"><?php echo $net_name ?></p></label>
      <div class="form-horizontal col-lg-4">
        <input id="marker_id" name="address" class="form-control input-sm" type="text" placeholder="node name..">
        <span class="input-group-btn">
          <button type="submit" class="btn btn-default btn-sm">Locate</button>
        </span>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css button alignment twitter-bootstrap-3

【解决方案1】：

JSFiddle“答案”

切入正题 - 您可以查看我在 JSFiddle 上的测试结果：http://jsfiddle.net/eThej/。注意 - Bootstrap 是响应式的，因此您需要使预览窗口足够大，否则控件将换行到下一行。这是为了让表单在较小的屏幕上工作（响应式设计）。

解释/注释

我相信以下示例（从引导站点中提取）可以满足您的需求：

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

我获取了您的代码并对其进行了一些更改，并得到了类似的结果。首先 - 您正在寻找一个具有“form-inline”类的表单。其次，如果您使用的是列布局，我认为您可能想要“md”列而不是“lg”列。最后我认为你的 div 没有正确嵌套。这不是很漂亮，但我应用了这些一些更改并且更接近我认为你想要的。结果如下：

<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
    <!-- Default panel contents -->
    <div style="border-color:#FCD229; background-color:#FCD229" class="panel-heading">

        <form class="form-inline">
            <div class="col-md-4">
                <label class="control-label">Map for Network</label>
                <p class="badge">Test</p>
            </div>
            <div class="col-md-8">
                <div class="form-group"><input id="marker_id" name="address" class="form-control input-sm"
                    type="text" placeholder="node name.." />
                </div>
                 <button type="submit" class="btn btn-default">Locate</button>
            </div>
        </form>
    </div>
</div>

同样，这不是一个完美的答案，但我认为它应该让你走上正轨。祝你好运！

【讨论】：

【解决方案2】：

这段代码似乎更适合我的想法。

<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
                    <!-- Default panel contents -->

                    <div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">


                        <label class="control-label col-lg-8">Map for Network Test</label>
                         <div class="input-group input-group-sm">
                          <input id="" type="text" class="form-control" placeholder="Node Name">
                          <span class="input-group-btn">
                          <button class="btn btn-default" type="button">Locate</button>
                          </span>
                         </div><!-- /input-group -->

                     </div>


                    </div>

【讨论】：