Question

我这里有一个包含3个下拉菜单的div：

<div class="text-center container">
       <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" id="make" type="button" data-toggle="dropdown"> Subject
                    <span class="caret"></span>
                </button>

                <ul class="dropdown-menu" id="makein">
                    <li>bmw</li>
                    <li>mercedes</li>
                    <li>mazda</li>
                    <li>ford</li>
                    <li>lada</li>
                    <li>audi</li>
                    <li>skoda</li>
                    <li>fiat</li>
                </ul>

            </div>

            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" id="year" type="button" data-toggle="dropdown"> Year
                    <span class="caret"></span>
                </button>

                <ul class="dropdown-menu" id="yearin">
                    <li>2016</li>
                    <li>2015</li>
                    <li>2014</li>
                    <li>2013</li>
                    <li>2012</li>
                    <li>2011</li>
                    <li>2010</li>
                    <li>2009</li>
                </ul>

            </div>

            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" id="level" type="button" data-toggle="dropdown"> Level
                    <span class="caret"></span>
                </button>

                <ul class="dropdown-menu" id="levelin">
                    <li>luxury</li>
                    <li>ordinary</li>
                </ul>

            </div>
      </div>

我使用以下内容将div放在屏幕中间居中：

.container{
    width: 300px;
    height: 300px;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;

}

.dropdown{
    display: inline-block;   
}

它也会水平对齐我的下降。

我使用这个自定义css将我的div放在屏幕中间。我想知道是否有办法避免使用自定义css，并且仅使用Bootstrap做同样的事情。

我的目标是： 1：找到页面中间中间的container。 2：水平对齐下拉列表。

Answer 1

Bootstrap附带container和text-center类，那么为什么要定义自己的container类？只需在代码中正确包含引导程序文件即可，无需使用此自定义CSS。

text-center类会在屏幕中间对齐您的下拉列表，container类具有固定宽度和自动边距。查看jsFiddle

Answer 2

要达到预期效果，请在CSS下面使用容器

.container{
    width: 300px;
    height: 60%;
    position: absolute;
    top:20%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Answer 3

在bootstrap中无法在屏幕中间找到div。你可以查看以下自定义css代码：

.container {
    position: absolute;
    width: 100%;
    top: 45%;
}
.dropdown {
    display: inline-block;
}

Bootstrap Center是中间的一个分区

3 个答案: