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%;
}

对不起，这是我的代码。我的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

Answer 1

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

Bootstrap col-md-12对齐按钮

1 个答案: