如何使Bootstrap中心下拉

Question

点击菜单后，下拉列表左侧对齐 如何让下拉菜单与屏幕中心对齐？

＆＃13;

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div align="center" class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown Example
    <span class="caret"></span>
  </button>
  <ul float: right class="dropdown-menu">
    <li><a href="#">This</a></li>
    <li><a href="#">That</a></li>
    <li><a href="#">Those</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加以下css

    .dropdown-menu{
           margin-left:calc(50% - 80px);
           margin-right:calc(50% - 80px);}

这是fiddle

Answer 2

贾维斯你好。

试试这个......只需添加Bootstrap 类 <div id="navbar" class="collapse navbar-collapse text-center"> <ul class="nav navbar-nav navbar-right"> 即可。

导航栏代码块中的这一行。

<?php

    class titleGenerator {
        public $names = array(
        'Best Beer',
        'Happy Burgers',
        'Alexs Nachos',
        'Big Sams Tacos'
        );
        public $i = rand(0, count($names)-1);

        public function sayTitle() {
            echo $names[$i];
        }
    }

    $titles = new titleGenerator;
    $titles->sayTitle();
?>

这会将列表文本放在中间。

以下是 Fiddle 。