Question

Fiddle

<div class="row">
    <div class="col-xs-6 input-group input-group-lg" style="padding-left:15px;">
        <span class="input-group-addon add-on"><i class="fa fa-calendar"></i></span>
        <input class="form-control" id="daterange" type="text" placeholder="Run Range"
        maxlength="128" readonly="readonly" style="background-color:White;cursor:pointer;" />
    </div>
    <div class="col-xs-3">
            <button type="button" class="btn btn-primary btn-lg has-spinner" id="btn-search">Go!</button>
    </div>
</div><br>

我的网站中确实有几十个行和列的其他实例，但这一行拒绝表现。为什么呢？

Answer 1

Bootstrap中的

input-group 类显示为块元素，因此它会将后面的任何内容推送到新行。如果您希望按钮位于输入字段旁边，则需要添加一个类，例如 input-group-inline ，并覆盖Boostrap的默认样式。

.input-group-inline {
   display: inline-block;
}

Answer 2

你的小提琴缺少对bootstrap.css的引用，我添加了它并且一切正常https://jsfiddle.net/ujbh3z4p/尝试检查你的html中的引用

Answer 3

从一行中删除填充。这可能导致行的宽度不同。

HTML，为什么列不连续？引导

3 个答案: