html - Bootstrap输入组按钮使模式中的第二行保持换行

由于某种原因..输入组中的按钮一直环绕到第二行..我要强制其停留在第一行的唯一方法是例如使用CSS来使宽度达到80％。但是，这四个元素之间似乎没有间距。

有没有更干净的方法可以做到这一点？我什至不知道为什么要包装到第二行。也许是因为我在Modal中使用它？

编辑：http://imgur.com/sfWqATl看起来如何

<!--3rd row-->
<div class="row form-group">
    <div class="col-md-2">
        stuff...
    </div>

    <div class="col-md-4">
        <div class="input-group">
            <small>Logo 1 ID / File Path</small>
            <br />
            <div>
                <input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
                <input type="text" class="form-control" />
                <span class="input-group-btn">
                    <button class="btn btn-default glyphicon glyphicon-folder-open" type="button"></button>
                </span>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        stuff...
    </div>

    <div class="col-md-2">
        stuff...
    </div>
</div>

最佳答案

我认为您可能在根据文档正确设置类和元素以正确链接方面有些困惑。我重新编写了一些代码，以便从引导网站上对其进行建模，并且看起来工作正常：

<div class="col-md-4">
    <small>Logo 1 ID / File Path</small>
    <input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
    <div class="input-group">
        <input type="text" class="form-control" />
        <span class="input-group-btn">
            <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-folder-open"></i></button>
        </span>
    </div>
</div>

您可以在此处查看示例：http://www.bootply.com/EHvB2rn9YW

关于html - Bootstrap输入组按钮使模式中的第二行保持换行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32511670/