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

Question

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

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

但它会移动右侧文本框后面的部分。
示例代码是我添加的 https://jsfiddle.net/386my76a/ 是否有 Bootstrap 的内置解决方案，或者我需要添加自定义 CSS 来修复它(例如:为第二部分保留 float )？

Answer 1

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

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