Bootstrap col-md-12对齐按钮

时间:2016-06-05 20:19:02

标签: css twitter-bootstrap grid

我正在全力以赴地将按钮中心对齐到“col-md-12” 但我没有响应式设计的解决方案。 必须通过按钮

放置此解决方案
#player-list-button {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

此解决方案很好,但不适用于响应。 这意味着,当我将浏览器调整得更小时,此按钮不会停留在col-md-12的中间,它会消失。必须由col-md-12

放置
#notResponsitiv{
    margin-lef:34%;
}

对不起,这是我的代码。我的DropDown Buttom我想调整中心。

<div class="col-md-12">
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <button type="button" id="player-list-button" class="btn btn-primary btn-main-style" data-toggle="dropdown">MyItems<span class="caret"></span></button>
                <ul class="dropdown-menu">          
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>                   
                </ul>
            </li>
        </ul>
    </div>
</div>

版本3 可悲的是,它不起作用。

#player-list-button {
    margin: 0 auto;
    display: block;
    text-align: center;
}

当我使用2行时,如下面的html,按钮位于桌面左侧,如果我调整窗口大小,按钮将消失:

<div class="container">
   <div class="row">
        <div class="col-md-6" style="background-color:pink">
            <h1>hello</h1>
        </div>
        <div class="col-md-6" style="background-color:pink">
            <h1>hello</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="background-color:pink">
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <button type="button" id="player-list-button" class="btn btn-primary btn-main-style" data-toggle="dropdown">MyItems<span class="caret"></span></button>
                        <ul class="dropdown-menu">          
                            <li>item</li>
                            <li>item</li>
                            <li>item</li>                   
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
  </div>
</div>

版本4 enter image description here

1 个答案:

答案 0 :(得分:0)

#player-list-button {
    margin: 0 auto;
    display: block;
    text-align: center;
}