html - 同一行上的引导按钮/输入字段

问题描述

我正在尝试重新创建此示例：https ://getbootstrap.com/docs/3.3/components/#input-groups-buttons-multiple

为什么如果我复制这个示例，使用与检查元素时看到的完全相同的代码，按钮和输入字段不在同一行？

<body>
  <div class="container-fluid">
  <form class="bs-example bs-example-form" data-example-id="input-group-multiple-buttons"> 
    <div class="row">
      <div class="input-group">
        <div class="col-lg-6">
          <input class="form-control" aria-label="Text input with multiple buttons">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default" aria-label="Help"><span
                                class="glyphicon glyphicon-question-sign"></span></button>
            <button type="button" class="btn btn-default">Action</button>
          </div>
        </div>
      </div>
    </div>
    </form>
  </div>
</body>

小提琴。

标签： htmlcsstwitter-bootstrap-3

您的列和输入组颠倒了。通常所有内容都应该在列内，并且一行的唯一子项应该是列。

<div class="col-lg-6">
    <div class="input-group">

演示

html - 同一行上的引导按钮/输入字段

问题描述

解决方案

推荐阅读