发表新帖
发表新帖

Change text-align responsively (with Bootstrap 3)?

后端 未结
关注
9 2183
心在旅途
心在旅途 2021-01-30 09:54

I\'m using Bootstrap 3 for a blog. In my custom CSS, I recently added

body {
    text-align: justify;
    ...
}

I like the result on bigger scr

相关标签:
9条回答
  • 悲哀的现实
    2021-01-30 10:35

    I like both Alberdigital and Fred K's answers - former provides valid CSS code you can use in your stylesheets, the latter is more thorough.

    Here's the best of both worlds.

    /*
 * 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; }
}
    0 讨论(0)
  • 予麋鹿
    2021-01-30 10:36

    Although the provided solution is absolutely right, I think there is a different approach that could be interesting. Bootstrap does not provide alignment classes that depend on window size, but you can define them:

    .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;
    }
}

    Then, you could add this classes to your html elements:

    <body class="text-justify-lg">

    You can also create css rules for text-left-xx and text-right-xx.

    0 讨论(0)
  • 深忆病人
    2021-01-30 10:40

    Yes, like this (where your breakpoint is set at 48em):

    body{
    text-align: left;
}
@media screen and (min-width: 48em){
    body{
        text-align: justify;
    }
}

    The second rule will override the first if the viewport width is greater than 48em.

    0 讨论(0)
  • 臣服心动
    2021-01-30 10:50

    All the "text-align" classes are provided in Bootstrap : Simply use align-lg-left, align-xs-center, etc ...

    0 讨论(0)
  • 醉梦人生
    2021-01-30 10:51

    It works for me, try this:

    text-align: -webkit-center;
    0 讨论(0)
  • 伪装坚强ぢ
    2021-01-30 10:53

    For a more complete solution try this:

    /*
 * 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; }
}
    0 讨论(0)
 看不清?
提交回复
热议问题