Bootstrap col-md-12 对齐按钮

Question

我一直在尝试在“col-md-12”中对齐按钮中心 但我没有响应式设计的解决方案。 此解决方案必须通过按钮放置

#player-list-button {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

此解决方案很好，但不适用于响应式。 这意味着，当我将浏览器缩小时，这个按钮不在 col-md-12 的中间，它消失了。必须由 col-md-12 放置

#notResponsitiv{
    margin-lef:34%;
}

抱歉，这是我的代码。我的下拉按钮我想对齐中心。

<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 版

Answer 1

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