Question

我试图做到这一点： http://i.stack.imgur.com/qhW62.png

＆＃34;输入组 - 插件＆＃34; Bootstrap类似乎正是我正在寻找的但是我没有得到我想要的结果，因为输入形式扩展到窗口的整个宽度，如下所示：

<div class="text-center">
    <form class="form-inline" role="form" action="" method="get">
        <h4> 
            Find in 
            <div class="input-group"> 
                <span class="input-group-addon glyphicon glyphicon-screenshot"></span> 
                <input type="text" name="in" id="searchTextField" class="form-control" value="London"> 
            </div>           
            <button type="submit" class="btn btn-primary">Search</button>                         
        </h4> 
    </form>
</div>

这是第一个屏幕截图的原始代码：

<div class="text-center">
    <form class="form-inline" role="form" action="" method="get">
        <h4> 
            Find in   
            <input type="text" name="in" id="searchTextField" class="form-control" value="London">          
            <button type="submit" class="btn btn-primary">Search</button>                         
        </h4> 
    </form>
</div>

Answer 1

这是因为input-group类而发生的。它具有display: table样式，可以将您的插件附加到输入字段。解决这个问题的一种方法是在输入组div周围添加一个包装div。 Here is a demo

请注意，我仅将样式设置为768px及更大。我这样做是为了匹配你给出的例子的功能。您可以删除它，无论屏幕尺寸是更小还是更大，它都会被触发。

HTML

<div class="text-center">
    <form class="form-inline" role="form" action="" method="get">
        <h4> 
            Find in 
            <div class="input-group-fix">
                <div class="input-group"> 
                    <span class="input-group-addon glyphicon glyphicon-screenshot"></span> 
                    <input type="text" name="in" id="searchTextField" class="form-control" value="London"/> 
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Search</button>                         
        </h4> 
    </form>
</div>

CSS

@media (min-width: 768px) {
    .input-group-fix {
        display: inline-table;
        vertical-align: middle;
    }
}

编辑：将内联块更改为内联表，因为它适用于Firefox和Chrome。它似乎也是一个更好的解决方案，因为input-group使用带有表格单元格的表格显示。

Updated demo

您还可以查看显示类型here之间的差异。

使用Bootstrap 3在输入表单之前添加按钮

1 个答案: