Question

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

<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>

Answer 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>

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

Answer 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>

bootstrap输入与按钮对齐

2 个答案: