Question

我使用输入组使用bootstrap创建寻呼机。

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

但是它会在文本框右侧移动部分。
示例代码是我添加的 https://jsfiddle.net/386my76a/ 是否有任何bootstrap的内置解决方案或我需要修复它添加自定义CSS（例如：第二部分浮动左侧）？

Answer 1

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

＆＃13;

@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%;}

＆＃13;

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

＆＃13;

Answer 2

Bootstrap有自己的分页类，你可以直接使用它来制作你的分页。

error C4700: uninitialized local variable 'sp' used
error C4700: uninitialized local variable 'd2' used
error C4700: uninitialized local variable 'd1' used

您可以在此处查看此链接，并显示其工作原理：

http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=pagination-with-disabled-and-active-state-01

希望它有所帮助。

bootstrap

2 个答案: