Bootstrap:如何不使用特定大小的文本？
Bootstrap:如何不使用特定大小的文本？
提问于 2014-08-28 04:38:02
当我将浏览器的大小缩小到XS大小时，使用Twitter Bootstrap。这是我的页脚。我有text-right属性来处理其余的屏幕大小，但在XS上，它在堆叠后仍然将屏幕靠右对齐。
如何在XS屏幕大小上不使用text-right ？
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 copyright">
<p>© 2014 LFDate. All rights reserved.</p>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="list-inline text-right">
<li><p><a href="#">Blog</a></p></li>
<li><p><a href="#">Press</a></p></li>
<li><p><a href="#">Jobs</a></p></li>
<li><p><a href="#">Contact</a></p></li>
</ul>
</div>
</div>
</div>
</footer>回答 4
Stack Overflow用户
回答已采纳
发布于 2014-08-28 04:44:12
您可以使用CSS简单地重写它：
@media (max-width: 767px) {
footer .text-right { text-align:center }
}xs大小适用于767px及更低分辨率。
Stack Overflow用户
发布于 2016-08-14 08:41:28
Bootstrap 4 has added new css classes for this purpose
<p class="text-sm-right">Right aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</p>Stack Overflow用户
发布于 2014-08-28 04:40:01
在GitHub上找到了这个宝石：https://github.com/twbs/bootstrap/issues/11292
它为左侧和右侧的文本添加响应类
.text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg {
text-align: left;
}
.text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg {
text-align: center;
}
.text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg {
text-align: right;
}
.text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg {
text-align: justify;
}
@media (max-width: 767px) {
.text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
text-align: inherit;
}
.text-left-xs {
text-align: left;
}
.text-center-xs {
text-align: center;
}
.text-right-xs {
text-align: right;
}
.text-justify-xs {
text-align: justify;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
text-align: inherit;
}
.text-left-sm {
text-align: left;
}
.text-center-sm {
text-align: center;
}
.text-right-sm {
text-align: right;
}
.text-justify-sm {
text-align: justify;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
text-align: inherit;
}
.text-left-md {
text-align: left;
}
.text-center-md {
text-align: center;
}
.text-right-md {
text-align: right;
}
.text-justify-md {
text-align: justify;
}
}
@media (min-width: 1200px) {
.text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
text-align: inherit;
}
.text-left-lg {
text-align: left;
}
.text-center-lg {
text-align: center;
}
.text-right-lg {
text-align: right;
}
.text-justify-lg {
text-align: justify;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25536497
复制相关文章
相似问题