Question

我确信有人已经发布了这样的问题，但我找不到解决方案。

我正在使用Ruby on Rails，Brootstrap，我希望在页面中间成为我的下拉菜单（整个），但是下拉菜单中的文本（像We，我们做什么等等......）菜单应该是左侧的。

我该怎么办？

 <div class="btn-toolbar">
      <div class="btn-group">


    <button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
      About us
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li>
        <a href="del">
           <strong> We</strong>
         </a>
      </li>
      <li>

        <div class="mcol">
          <ul class ="sub">
            <div class ="subcolumns menuactivity">
              <a href="details"> What we do </a>
            </li>

      <a href="edit"> Countries </a>
    </div>
  </ul>
  <li>
    <a href="del">
      <strong>References </strong>
    </a>
  </li>
  </ul>


  <div class="btn-group">
    <button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
      News & Events
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li>
        <a href="del">
          <strong>Calender</strong>
        </a>
      </li>
      <ul class ="sub">
        <div class ="subcolumns menuactivity">
          <li>
            <a href="details"> News archive</a>
          </li>
        </ul>
    </div>

  </ul>
</div>

Answer 1

如果你默认使用bootstrap，你可以尝试下面的

  <a class="pull-left" href="details"> What we do </a>

我已经更新了一个例子。

http://jsfiddle.net/acc8t/

我是通过使用下面的css

来做到这一点的

.sub{margin-left:0px;}

Answer 2

我已经找到了另一种解决方案。只需在css中输入以下代码：

.dropdown-menu {
  text-align: left;
   }

.btn-toolbar{
  text-align: center;
  padding-bottom:40px;
}

下拉菜单，Bootstrap，菜单中心，文本左侧

2 个答案: