我这里有一个 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:水平对齐下拉菜单。
最佳答案
Bootstrap 附带了 container
和 text-center
类,那你为什么要定义自己的 container
类?只需在您的代码中正确包含 Bootstrap 文件,而无需此自定义 CSS。
text-center
类将在屏幕中间对齐您的下拉菜单,container
类具有固定宽度和自动边距。检查jsFiddle
关于html - Bootstrap 在中间居中一个 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39085355/