Bootstrap 输入组按钮在模式中一直换到第二行

Question

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

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

<!--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

Bootstrap 输入组按钮在模式中一直换到第二行

Bootstrap input group button keeps wrapping to 2nd line in a modal

html

css

twitter-bootstrap

bootstrap-modal