Question

我正在尝试在引导程序3按钮栏中放置一个输入框，但它未按预期对齐。

<div class="row">
    <div class="col-xs-12">
        <div class="btn-toolbar text-center">
            <div class="btn-group">
                   <div class="input-group col-xs-3">
                     <input type="text" class="form-control">
                     <span class="input-group-addon">$</span>
                   </div>
            </div>
            <div class="btn-group">
                <button class="btn btn-default">Button 1</button>
                <button class="btn btn-default">Button 2</button>
            </div>
        </div>
    </div>
</div>

如果我使用vanilla输入，但是当我尝试使用输入组时，第二个btn-group中的按钮向下移动到下一行，它可以正常工作。关于如何让它们出现在同一行的任何想法？

这是一个演示问题的小提琴

http://jsfiddle.net/6XST2/

Answer 1

尝试看到这个解决方案在此解决方案中，您必须将班级col-xs-3更改为col-xs-12

http://jsfiddle.net/6XST2/1/

Answer 2

将col类设置为父元素.btn-group。改变这个：

<div class="btn-group">
    <div class="input-group col-xs-3">

对此：

<div class="btn-group col-xs-3">
    <div class="input-group">

否则，btn-group正在填充整个宽度 http://jsfiddle.net/6XST2/3/

按钮栏中的输入框

2 个答案: