改变文本alignment响应（使用Bootstrap 3）？
我正在使用Bootstrap 3作为博客。 在我自定义的CSS中，我最近添加了
body { text-align: justify; ... } 我喜欢在更大的屏幕上（平板电脑，桌面）的结果。 但是在小屏幕上（电话），正确的文本并不是非常有用，因为列的范围较窄，而且我的博客偶尔也会使用long-ish-technical-terms-like-this的long-ish-technical-terms-like-this 。
我可以响应text-align: justify 只在大屏幕上text-align: justify ？
是否有可能通过CSS完成，或者，我需要写一些自定义的JS来做到这一点？
是的，像这样（你的断点是48em）：
body{ text-align: left; } @media screen and (min-width: 48em){ body{ text-align: justify; } }
如果视口宽度大于48em，则第二个规则将覆盖第一个规则。
虽然提供的解决scheme是绝对正确的，但我认为有一个不同的方法可能是有趣的。 Bootstrap不提供依赖于窗口大小的alignment类，但可以定义它们：
.text-justify-xs { text-align: justify; } /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { .text-justify-sm { text-align: justify; } } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { .text-justify-md { text-align: justify; } } /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .text-justify-lg { text-align: justify; } }
然后，你可以添加这个类到你的html元素：
<body class="text-justify-lg">
您也可以为text-left-xx和text-right-xx创buildcss规则。
要获得更完整的解决scheme，
/* * Responsive text aligning * http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/ */ .text-xs-left { text-align: left; } .text-xs-right { text-align: right; } .text-xs-center { text-align: center; } .text-xs-justify { text-align: justify; } @media (min-width: @screen-sm-min) { .text-sm-left { text-align: left; } .text-sm-right { text-align: right; } .text-sm-center { text-align: center; } .text-sm-justify { text-align: justify; } } @media (min-width: @screen-md-min) { .text-md-left { text-align: left; } .text-md-right { text-align: right; } .text-md-center { text-align: center; } .text-md-justify { text-align: justify; } } @media (min-width: @screen-lg-min) { .text-lg-left { text-align: left; } .text-lg-right { text-align: right; } .text-lg-center { text-align: center; } .text-lg-justify { text-align: justify; } }
现场演示
只需调整窗口的大小，你就可以看到它将如何切换到text-align:left; 如果窗口大小小于400px 。
<style> @media screen and (min-width: 400px) { .text1 { text-align: justify; } } p { text-align: left; } </style> <p class="text1">vlédmjd fsdi dlin dsilncds ids nic dsil dsinc dlicidn lcdsn cildcndsli c dsilcdn isa slia sanil sali as as nds nds lcdsicd insd id nid ndi cas sal sa insalic lic sail il dnsailcn lic il eilwnvrur vnrei svfd nvfn vk in f,vn y,h ky,vnkivn iesnvfilsdnhvidsnvdslin dlindilc ilc lisn asiln sliac lasnl ciasnc in li nsailcn salin ilanclis cliasnc lincls iandlisan dlias casilcn alincalis cli ad lias naslicn aslinc dliasnc slince ineali dliasnc liaslci nasdlicn laincilancfrelvnln dsil cndlic ndlicna linasdlic nsalinc lias</p>
我喜欢Alberdigital和Fred K的答案 – 前者提供有效的CSS代码，可以在样式表中使用，后者更彻底。
这是两全其美的。
/* * Responsive text aligning * http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/ * * EDITED by Nino Škopac for StackOverflow (https://stackoverflow.com/q/18602121/1325575) */ .text-xs-left { text-align: left; } .text-xs-right { text-align: right; } .text-xs-center { text-align: center; } .text-xs-justify { text-align: justify; } @media (min-width: 768px) { .text-sm-left { text-align: left; } .text-sm-right { text-align: right; } .text-sm-center { text-align: center; } .text-sm-justify { text-align: justify; } } @media (min-width: 992px) { .text-md-left { text-align: left; } .text-md-right { text-align: right; } .text-md-center { text-align: center; } .text-md-justify { text-align: justify; } } @media (min-width: 1200px) { .text-lg-left { text-align: left; } .text-lg-right { text-align: right; } .text-lg-center { text-align: center; } .text-lg-justify { text-align: justify; } }
在我的情况下，我不喜欢媒体查询过度使用。 所以，有时我用两种方法重复内容。 一个自定义alignment，另一个默认alignment。 一些代码：
<div class="col-md-6 visible-xs hidden-sm hidden-md hidden-lg"> <%-- Some content here --%> </div> <div class="col-md-6 text-right hidden-xs"> <%-- Same content here --%> </div>
对我英语不好的道歉;）
它适用于我，试试这个：
text-align: -webkit-center;
Bootstrap中提供了所有“文本alignment”类：简单地使用align-lg-left ， align-xs-center等。
