Question

我制作了一个包含不同元素的网页。其中一个是下拉菜单。我将一个元素置于网页中间：

但是当我点击下拉菜单中的按钮并显示选项时，这些选项并不居中。

我的HTML代码：

<div class="container-fluid">   <!-- Solo indicamos container-fluid ya que si añadimos container éste ocupa el 60% del a página -->

    <div class="row text-center">
        <h1>MIQUEL ALIMENTACIÓ</h1>
        <h4 id='titEdicion'></h4><h4 id='titEstado'></h4>
    </div>
    <br>

    <div id="toolbar">

        <div class="row text-center">
            <div class="dropdown">
                <button class="btn btn-addcom dropdown-toggle btn-size-edicion" type="button" data-toggle="dropdown">SELECCIONAR EDICIÓ
                    <span class="caret"></span></button>
                <ul class="dropdown-menu text-center" id="drEdicion">
                    <li"><a href=#>TOT</a></li>
                    <?php 
                    $result = dbQuery($conn, "SELECT * FROM produccion.ma_edicion");
                    while ($row = pg_fetch_row($result)){ ?>
                    <li><a href=#><?php echo $row[2]; ?></a></li>
                    <?php 
                    }
                    ?>
                </ul>
            </div>
        </div>
        <br>
            <div class="row text-center">               
                <div>
                    <button id="newedition" type="submit" class="btn btn-group btn-size-edicion" data-toggle='modal' data-target='#edicion'>NOVA EDICIÓ</button>

                </div>
            </div>         
    </div>
</div>

我尝试在class ='text-center'中添加，在引导程序中使用此类来居中元素，但在这种情况下它不起作用。

我把jsfiddle放在一个例子中：

https://jsfiddle.net/ruzD/DTcHh/26469/

随着最后的改变：

Answer 1

你可以尝试

<button class="btn btn-addcom dropdown-toggle btn-size-edicion" id="menu_list" type="button" data-toggle="dropdown">SELECCIONAR EDICIÓ
              <span class="caret"></span></button>
              <ul class="dropdown-menu text-center" id="drEdicion" aria-labelledby="menu_list">
                    <li"><a href=#>TOT</a></li>
              <?php 
                $result = dbQuery($conn, "SELECT * FROM produccion.ma_edicion");
                while ($row = pg_fetch_row($result)){ ?>
                    <li><a href=#><?php echo $row[2]; ?></a></li>
                <?php 
                }
                ?>
                </ul>

Answer 2

只要实际下拉列表绝对定位，您就无法独立地将此列表置于中心位置。实际上这就是为什么它没有中心:)其中一个解决方案是用<div class="dropdown-wrapper">包装你的下拉列表并给它一个样式：

.dropdown-wrapper {
  width: 30%;
  margin: 0 auto;
}

宽度可以是你想要的任何东西。

.dropdown-wrapper {
  width: 30%;
  margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown-wrapper">
  <div class="dropdown">
    <button class="btn btn-addcom dropdown-toggle btn-size-edicion" type="button" data-toggle="dropdown">SELECCIONAR EDICIÓ
    <span class="caret"></span></button>
    <ul class="dropdown-menu text-center" id="drEdicion">
      <li><a href=#>TOT</a></li>
    </ul>
  </div>
</div>

Bootstrap - css - 下拉菜单中心选项

2 个答案: