css - bootstrap 中间的按钮组和文本框

Question

我正在使用输入组使用 Bootstrap 创建寻呼机，如下所示。

+──+─+───+──+─+──+
│<<│<│ 1 │GO│>│>>│
+──+─+───+──+─+──+

但它移动了右侧文本框之后的部分。
示例代码是我添加的 https://jsfiddle.net/386my76a/是否有任何 Bootstrap 的内置解决方案，或者我需要通过添加自定义 CSS 来修复它(例如:第二部分向左浮动)？

Answer 1

你可以做的是设置整个输入组的最小宽度(如width: 1%;)并将输入字段包装到.input-group-btn 类(class):

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {margin: 10px;}
.pagination {width: 1%;}

<div class="container">
    <div class="input-group pagination">
        <div class="input-group-btn">
            <button class="btn btn-default" type="button">&lt;&lt;</button>
            <button class="btn btn-default" type="button">&lt;</button>
        </div>
        <div class="input-group-btn">        
            <input class="form-control" type="text" style="width: 50px;" value="2">
        </div>
        <div class="input-group-btn">
            <button class="btn btn-primary" type="button">Go</button>
            <button class="btn btn-default" type="button">&gt;</button>
            <button class="btn btn-default" type="button">&gt;&gt;</button>
        </div>
    </div>
</div>