8

ドロップダウン メニューを Bootstap の中央に配置しようとしています。

 <ul class="dropdown-menu">

デフォルトでは左に引っ張られますが、pull-right次のように定義して右に移動させることもできます。

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

でもセンターにしたい。Boostrap は初めてで、中央に配置する方法がわかりません。任意のヒント？私は right:50% を試しましたが、うまくいきませんでした。

注: ドロップダウン メニューの実際のテキストを中央に配置するつもりはありません。実際のドロップダウン メニューとキャレットを、ドロップダウンするナビゲーション メニュー項目の下に配置しようとしています。

これが私のテンプレートの完全なコード スニペットです。

<ul class="nav">
    <li id="tab_profile">
        <a href="{% url profile_detail user.username %}">{% trans "PROFILE" %}</a>
    </li>
    <li id="product_data">
        <a href="{% url all_models %}">{% trans "PRODUCT DATA" %}</a>
    </li>
    <li id="product_library">
        <a href="{% url library %}">{% trans "LIBRARY" %}</a>
    </li>
  <li id="database">
        <a href="/DATABASE/">{% trans "DATABASE" %}</a>
    </li>
        <li class="dropdown" id = "community">
        <a class="dropdown-toggle" href="#">COMMUNITY</a> 
             <ul class="dropdown-menu pull-right">
                <li> <a href="/profiles">Search</a></li>
                <li><a href="/questions/">Questions and Answers</a></li>
                <li><a href="{% url view_requests %}">Requests</a></li>
              </ul>
        </li>
</ul>

CSS:

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 4px 0;
  margin: 1px 0 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.dropdown-menu.pull-right {
  margin-right: auto; 
  margin-left: auto;
}

ここに画像の説明を入力

4

3 に答える 3

3 
.dropdown-menu {
    left: 50% !important;
    margin-left: -70px;
}

デフォルトのブートストラップドロップダウンメニューを使用している場合、これは私にとってはうまくいきました。メニューの幅に応じて左マージンを調整するだけです。

于 2015-08-17T02:26:39.603 に答える
2

以下に示すように、CSS として以下を追加し、このクラスをタグで指定できます。

.centerDropdown {
    left: auto !important;
    right: -25% !important;
}
.centerDropdown:after {
   left: auto !important;
   right: 45% !important;
}

HTML コードでは、

<li class="dropdown">
   <a href="/channel/list" data-toggle="dropdown" class="dropdown-toggle">
        <i class="icon-th-list"></i>
           Lists
   </a>
   <ul class="dropdown-menu centerDropdown">
          <li><a href="/list">Find a list</a></li>
          <li><a href="/my">My lists</a></li>
          <li><a href="/create">Create a list</a></li>
   </ul>
 </li>
于 2014-02-18T09:37:09.947 に答える