Question

见上图 - 我左侧有Bootstrap下拉列表，右侧有按钮。它们很好地对齐，但我想将分页移动到它们之间，以便更好地利用空间。现在，分页代码进一步缩小，但如果我在下拉菜单和按钮之间移动它，它会导致您在第二个图像中看到的内容。我怎么能把一切都对齐？

Bootiply：http://www.bootply.com/5Ufnpj317Z

编辑：

Answer 1

请查找附件图片并根据红色区域进行更改。

Answer 2

我已经重新安排了相当多的代码，总结如下：

介绍了bootstrap容器和行
删除了panel-body类
从右侧的按钮中删除了右拉类
添加了test.css以进行一些自定义调整
固定缩进

宽屏幕看起来不错，但是元素会在较小的屏幕上叠加在一起。

＆＃13;

/*test.css*/
#dropdownMenu1-div{
    display:inline;
}

#dropdownMenu2-div{
    display:inline;
}

.pagination{
    margin:0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="test.css">
</head>
<body>

    <h2 class="text-center">Browse</h2>
    <hr class="no-bottom-pad">
        <div class="container">
            <div class="row">
                <div class="col-xs-3">
                    <div class="dropdown inline-control" id="dropdownMenu1-div"">
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Location:
                        <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                            <li><a href="browse.php?">all</a></li>
                            <li class="divider"></li>
                            <li><a href="browse.php?&amp;loc=3">London Waterloo</a></li>
                            <li><a href="browse.php?&amp;loc=2">London Waterloo 3F workshop</a></li>
                            <li><a href="browse.php?&amp;loc=1">London Waterloo comms room</a></li>
                        </ul>
                    </div>
                    <div class="dropdown inline-control" id="dropdownMenu2-div">
                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Type:
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                            <li><a href="browse.php?">all</a></li>
                            <li class="divider"></li>
                            <li><a href="browse.php?&amp;type=1">Laptop</a></li><li><a href="browse.php?&amp;type=2">Chromebook</a></li>
                            <li class="divider"></li>
                            <li><a href="browse.php?&amp;vendor=HP">HP</a></li>
                            <li><a href="browse.php?&amp;vendor=Lenovo">Lenovo</a></li>
                            <li><a href="browse.php?&amp;vendor=Toshiba">Toshiba</a></li>
                            <li class="divider"></li>
                            <li><a href="browse.php?&amp;model=3">HP Brilliance 5000</a></li>
                            <li><a href="browse.php?&amp;model=1">Lenovo B50-70</a></li>
                            <li><a href="browse.php?&amp;model=2">Toshiba Portege R930</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-2" id="page-numbers">
                    <!-- <p class="no-bottom-pad">136 laptops</p> -->
                    <ul class="pagination">
                        <li class="active"><a href="browse.php?&amp;page=1">1</a></li>
                        <li><a href="browse.php?&amp;page=2">2</a></li>
                        <li><a href="browse.php?&amp;page=3">3</a></li>
                    </ul>
                </div>
                <div class="col-xs-7">
                    <a href="#" id="add-laptop-btn" class="btn btn-default" onclick="laptop_modal('new')">
                        Add Laptop
                    </a>
                    <input id="add-multiple-input" class="btn btn-default less-right-pad" type="number" min="0" max="50">
                    <a href="#" id="add-multiple-btn" class="btn btn-default less-right-pad  disabled" onclick="addMultiple();">
                        Add Multiple -&gt;
                    </a>
                    <input id="earmark-multiple-input" class="btn btn-default less-right-pad" type="number" min="0" max="50">
                    <a href="#" id="earmark-multiple-btn" class="btn btn-default less-right-pad  disabled" onclick="addMultiple();">
                        Earmark Multiple -&gt;
                    </a>
                </div>
            </div>
        </div>
</body>
</html>

＆＃13;

如何在按钮内移动Bootstrap分页

2 个答案: