html - Bootstrap 在中间居中一个 Div

Question

我这里有一个 div，其中包含 3 个下拉菜单:

<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 类？只需在您的代码中正确包含 Bootstrap 文件，而无需此自定义 CSS。

text-center 类将在屏幕中间对齐您的下拉菜单，container 类具有固定宽度和自动边距。检查jsFiddle