相关疑难解决方法(0)

Bootstrap:下拉菜单相对于navbar项的位置

我有以下下拉列表

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
    Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
    dropdown content goes here
</ul>
Run Code Online (Sandbox Code Playgroud)

下拉列表的左上角位于文本的左下角(Action),但我希望dropdwon右上角的位置位于文本的右下角.我怎样才能做到这一点?

感谢致敬.

css twitter-bootstrap drop-down-menu

97
推荐指数
5
解决办法
18万
查看次数

更改bootstrap下拉以向右水平放下

我有一个下拉菜单,在它下面打开一排图标(见图1,名称和图片被删除以保持隐私) 在此输入图像描述

我试图让这个菜单打开到选择孩子的右边,而不是在它下面(见图2,我想要得到的东西.图像将打开到下拉的右边而不是下面) 在此输入图像描述

我目前的代码是:

<div class="span4">      
        <div class="btn-group">
  <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
  <h3>Choose Child</h3>
  <img id="mainIcons" src="boyStudent.png" alt="boyStudent">
  <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li>
        <div class="btn-group">
      <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
       <h5>A</h5>
       <img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a>
       <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
       <h5>J</h5>
       <img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a>
     </div>
    </li> 
  </ul>
Run Code Online (Sandbox Code Playgroud)

我尝试使用以下示例,这有助于将下拉向左推如何在左侧 打开twitter bootstrap子菜单? 但我想不出办法将这个用于我想做的事情

谢谢

html css twitter-bootstrap drop-down-menu

6
推荐指数
1
解决办法
3万
查看次数

Bootstrap下拉拉左不工作

我已经尝试过把拉左手放在所有东西上,无论我做什么,包含'编辑'和'破坏'的下拉菜单都是正确的意思我出现了令人讨厌的滚动条.

HAML版本:

.btn-group
  %button{ :class => 'btn btn-mini dropdown-toggle', 'data-toggle' => 'dropdown' }
    %span.icon-cog
  %ul.dropdown-menu
    %li= link_to 'Edit', '#'
    %li= link_to 'Destroy', '#'
Run Code Online (Sandbox Code Playgroud)

HTML版本:

<div class='btn-group'>
  <button class='btn btn-mini dropdown-toggle' data-toggle='dropdown'>
    <span class='icon-cog'></span>
  </button>
  <ul class='dropdown-menu nav pull-left'>
    <li><a href="#">Edit</a></li>
    <li><a href="#">Destroy</a></li>
  </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

html css ruby-on-rails twitter-bootstrap

3
推荐指数
2
解决办法
2万
查看次数