twitter bootstrap 问题:右对齐下拉标题中的插入符号 [英] twitter bootstrap issue : Right align the caret in the dropdown header
本文介绍了twitter bootstrap 问题:右对齐下拉标题中的插入符号的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对插入符号的正确对齐有疑问.在 span 中使用 .pull-right 使其转到右上角.
我怎样才能让它再次垂直居中?我也想将文本左对齐
http://www.bootply.com/r8x7g5Bw5R
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret pull-right"></span><;跨度>测试</跨度>按钮><ul class="dropdown-menu" role="menu"><li><a href="#">test</a></li><li><a href="#">tes2</a></li><li><a href="#">test3</a></li>
和 CSS
.cust-dropdown {宽度:200px;}
解决方案
只需互换 HTML 中的插入符号和跨度块:
HTML
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span id="titl">test</span><span class="插入符号"></span>按钮><ul class="dropdown-menu" role="menu"><li><a href="#">test</a></li><li><a href="#">测试 2</a></li><li><a href="#">测试 3</a></li>
CSS
.cust-dropdown {宽度:200px;}#标题{padding-right: 10px;}
您可以通过添加更多 padding-right
来使文本更靠左对齐.
I have an issue with the right alignment of the caret. Using .pull-right in the span makes it go to the top right corner.
How can I make it vertically centered again ? I also would like to align the text to the left
http://www.bootply.com/r8x7g5Bw5R
<div class="btn-group cust-dropdown">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret pull-right"></span><span>test</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">test</a></li>
<li><a href="#">tes2</a></li>
<li><a href="#">test3</a></li>
</ul>
</div>
and the CSS
.cust-dropdown {
width: 200px;}
解决方案
Just interchange the caret and span blocks in HTML:
HTML
<div class="btn-group cust-dropdown">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span id= "titl">test</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">test</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
</ul>
</div>
CSS
.cust-dropdown {
width: 200px;
}
#titl {
padding-right: 10px;
}
You can align the text more to the left by adding more padding-right
.
这篇关于twitter bootstrap 问题:右对齐下拉标题中的插入符号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文