fluid on xs devices only

2018-06-30 05:47:40

I want to use the full width on xs and sm devices (container-fluid) but just the container class for all other devices What's the best way to put this in place? I've tried jasnys bootstrap which has a container-smooth class but it doesn't centre the content when the screen gets over a certain size...

Overwrite the container class in your CSS and your done:

/* XS styling */
@media (max-width: @screen-xs-max) {
  .container {
    width: inherit;
  }
}

/* SM styling */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  .container {
    width: inherit;
  }
}

Just replace the Less variables with your corresponding px-values.

或者你可以这样做，它也可以工作：

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
    .container {
        min-width: 100%;
    }
}

you can add a copy of the same container and configure it visible only in the sizes you want with the classes hidden-xx and visible-xx like this:

<div class="container-fluid hidden-md hidden-lg">
   your content here
</div>

and this for the normal container:

<div class="container hidden-xs hidden-sm">
       your content here
    </div>

链接地址: http://www.djcxy.com/p/84380.html

上一篇: 活动结束后，通知消失