对齐中心对齐的右引导网格
我正在使用引导网格系统。 我有3个网格对齐其中心:对齐中心对齐的右引导网格
<div id="jumbotron">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<p>
Logo
</p>
</div>
<div class="col-md-4 col-centered">
<h3>
Some text
<h3>
</div>
<div class="col-md-4 col-centered">
<ul class="list">
<li>
<img src="img_url"/>
<a class="phones" href="+1-380-555-5555">+13805555555</a>
</li>
<li>
<img src="img_url"/>
<a class="phones" href="+1-380-555-5555">+13805555555</a>
</li>
<li>
<img src="img_url"/>
<a class="phones" href="+1-380-555-5555">+13805555555</a>
</li>
</ul>
</div>
</div>
</div>
</div>
和CSS的样子:
.row-centered {
text-align: center;
}
.list {
text-decoration: none;
color: #f1f0e9;
font-size: 20px;
font-family: 'Trirong', serif;
list-style-type: none;
text-align-last: right;
}
在第三格栅我有我想要右对齐。 text-align:right帮助,但是当我切换到移动模式时,bootstrap使列中的网格和第三个网格变为右对齐(其他两个居中)。 所以我需要第三个网格将右对齐,但在具有中心对齐的父网格内。可能吗?
答:
我已经分居两个<ul class = "list">
对象列,并添加
display: inline-block;
*display: inline;
属性列表类。
删除text-align-last: right;
财产,因为它不影响a
标签li
内。使用.list:last-child a
将选择最后的li
标签并影响其标签a
。
.row-centered {
text-align: center;
}
.list {
text-decoration: none;
color: #f1f0e9;
font-size: 20px;
font-family: 'Trirong', serif;
list-style-type: none;
/*text-align-last: right;*/
}
.list li:last-child a{
text-align: right;
}
没有什么变化。 它确实改变了例如颜色,但似乎继承父居中对齐。 –
没有什么变化 .LIST李:第n个孩子(N){ 文本对齐:权利; } 移动n个要素向右类似于 .LIST { 文本对齐倒数:右; } –
尝试pull-right
类添加到那些你想右
这是更好地提供真正的代码,而不是未关闭标签的堆块。 – Banzay
它看起来像你需要添加'COL-sm'和'COL-xs'规则了。 –
@Banzay谢谢,我已经更新了它。 –