下拉不服从中心

时间:2017-01-15 22:54:29

标签: twitter-bootstrap-3

我试图将一系列控件垂直放置并水平居中。控件很好,但是当我使下拉列表下拉时,下拉文本在屏幕上显示左对齐而不是在居中的下拉控件下。我已经花了几个小时就可以了,我无法做到。肯定会得到帮助。这是我正在使用的:

<div style="margin-top:50px; text-align: center;">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shift / Project2
        <span class="caret"></span></button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a class="dropdown-item" href="#">HTML</a></li>
            <li><a class="dropdown-item" href="#">CSS</a></li>
            <li><a class="dropdown-item" href="#">JavaScript</a></li>
        </ul>
    </div>

    <input autocorrect="off" autocapitalize="off" spellcheck="false" type="text" id="xxx" style="margin-top:50px;">

</div>

1 个答案:

答案 0 :(得分:0)

你可以像我在这里使用css一样解决这个问题:

http://www.bootply.com/zck8H4EVt4

只需将其添加到您的CSS:

.dropdown-menu {
  left: 50%;
  transform: translate(-50%, 0);
}

//编辑:

对不起,我已经忘记了btn-group班......

只需从第一个解决方案中删除CSS部分,将.btn-group添加到您的下拉列表中,并在您的btn-group之后使用.clearfix,就像我在这里所做的那样:

<div style="margin-top:50px; text-align: center;">
    <div class="dropdown btn-group">
        <button class="btn btn-primary dropdown-toggle" id="dropdownMenu1" aria-expanded="false" aria-haspopup="true" type="button" data-toggle="dropdown">Shift / Project2
        <span class="caret"></span></button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a class="dropdown-item" href="#">HTML</a></li>
            <li><a class="dropdown-item" href="#">CSS</a></li>
            <li><a class="dropdown-item" href="#">JavaScript</a></li>
        </ul>
    </div>
    <div class="clearfix"></div>
    <input id="xxx" style="margin-top:50px;" spellcheck="false" type="text" autocapitalize="off" autocorrect="off">
</div>

工作示例:http://www.bootply.com/lryEFqtmdp