Bootstrap Carets:制作子插入物并将它们漂浮到右边?

时间:2014-02-20 09:48:31

标签: html css twitter-bootstrap twitter-bootstrap-3 caret

我如何float或将我的所有插入正确

我按照此answer在菜单中制作子插件。

但它显示插入符号inline-block,并且我的子插入符号看起来不对齐。

enter image description here

我希望子插入符像这样对齐,

enter image description here

有可能吗?

的CSS,

.caret-right {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-left: 5px solid;
  border-left-color:#999999;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}

HTML,

<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Category <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="el-dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border:1px solid red;">News - a very long title <b class="caret-right"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#/3">Add</a></li>
                    <li><a href="#/4">Manage</a></li>
                </ul>
            </li>
            <li class="el-dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret-right"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Add</a></li>
                    <li><a href="#">Manage</a></li>
                </ul>
            </li>
          </ul>
        </li>

修改

如果我将display浮动到right

enter image description here

3 个答案:

答案 0 :(得分:6)

要获得所需的结果,您应该更改标记。 <caret> div应该在文本之前。然后你可以向右浮动;

<强> Working Demo

<b class="caret-right"></b>  
News - a very long title 

<强> CSS

.caret-right {
float:right;
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-left: 5px solid;
  border-left-color:#999999;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  margin-top:5px;
  margin-right:-8px;
}

答案 1 :(得分:0)

您可以添加float: right

.caret-right {
  float: right; /*Added */
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-left: 5px solid;
  border-left-color:#999999;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}

答案 2 :(得分:0)

旧问题,但你可以通过添加class =“pull-right”来实现。

<li><a href="#">2011 <span class="caret-right pull-right"></span></a></li>

CSS

.caret-right {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-left: 5px solid;
  border-left-color:#1c2b36;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}