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

Question

出于某种原因.. 输入组中的按钮一直换行到第二行.. 我可以强制它留在第一行的唯一方法是使用 CSS 将宽度设为 80%，例如。但是 4 个元素之间的间距似乎不对......

有没有更简洁的方法来做到这一点？我什至不知道为什么它换行到第二行。可能是因为我在模态中使用它？

编辑:它看起来像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>

Answer 1

我认为您在根据文档设置要正确链接的类和元素时可能有点混淆。我从 bootstrap 网站重写了一些代码来建模它，它似乎工作正常:

<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