Change text-align responsively (with Bootstrap 3)?

后端 未结 9 2203
心在旅途
心在旅途 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)
提交回复
热议问题