问题
I am designing a site using Bootstrap 4. Most of the content lives in regular (fixed width) containers; however there are some images that should be full width (edge to edge), so for these I use .container-fluid.
In one specific page I have a layout that looks like this (for large resolutions):
The images are full width while the text is not, so my first thought was to put the images in a .container-fluid and the text in a regular .container, like this:
<div class="container-fluid">
<div class="row">
<div class="col">
<img ...>
</div>
</div>
<div class="row">
<div class="col">
<img ...>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
Text...
</div>
</div>
<div class="row">
<div class="col">
Text...
</div>
</div>
</div>
However, for mobile I need these to be stacked, like this:
But this would be a different structure (container-fluid for Image1 + container for text + container-fluid for Image2 + container for text).
Is there a way to achieve this using Bootstrap's grid system, without resorting to duplicating the content and showing one version or the other depending on the resolution? (I would prefer to avoid this).
回答1:
The easiest solution would be to have one layout for mobile and another for others and show/hide elements based on break points, but since you said you don't want to do that, then the only solution I could think of is to have .container-fluid as the container and manually set the max-width for those 2 columns that contain the texts.
Layout
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-6 order-sm-1 p-0">
Image1
</div>
<div class="col-sm-6 order-sm-3 p-0 col-shrink">
Heading
Text
</div>
<div class="col-sm-6 order-sm-2 p-0">
Image2
</div>
<div class="col-sm-6 order-sm-4 p-0 col-shrink">
Heading
Text
</div>
</div>
</div>
Explanations:
.container-fluid: to take up 100% width of the screen. It's easier to have wider container and shrink down the elements inside than have narrow container and grow the elements out of it..justify-content-center: to prepare to center those 2 shrink down version of the texts on small break point and up when they're not taking 100% width. Without it, those 2 sections will be aligned left..order-sm-*: to reorder them for break pointsmand upp-0: to get rid of the paddings between columns
CSS
The trick here is to style those 2 text sections on small break point and up to only take up half of the max-width of the .container:
/*
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
$grid-columns: 12;
You can probably make something similar to @mixin make-col($size, $columns: $grid-columns) at
\scss\mixins\_grid.scss
*/
@media(min-width: 576px) {
.col-shrink {
flex-basis: calc(540px / (12/6));
max-width: calc(540px / (12/6));
}
}
@media(min-width: 768px) {
.col-shrink {
flex-basis: calc(720px / (12/6));
max-width: calc(720px / (12/6));
}
}
@media(min-width: 992px) {
.col-shrink {
flex-basis: calc(960px / (12/6));
max-width: calc(960px / (12/6));
}
}
@media(min-width: 1200px) {
.col-shrink {
flex-basis: calc(1140px / (12/6));
max-width: calc(1140px / (12/6));
}
}
Now you might have noticed the way I wrote the CSS. Yes, you don't have to hard code the numbers if you're using SCSS/SASS in your project. Bootstrap has those all defined.
If you want to make it so dynamic, just like .col-sm-*, take a look at the @mixin make-col($size, $columns: $grid-columns) under \scss\mixins_grid.scss in your Bootstrap installation.
Screenshots
demo: https://jsfiddle.net/davidliang2008/xyaqzt67/64/
回答2:
Depending on how precise you want your fixed-width content to be you could get away with padding utility classes to ensure there is sufficient padding on the margins. But you can achieve this with a nested .row as well.
It won't be truly fixed width but you'll have more granular control of the sizing with relatively little alteration to your existing code.
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-12 col-md">
<img src="//placehold.it/500x250/&text=IMG1" class="w-100 mb-4" />
<div class="row justify-content-center">
<div class="col-10 col-md-8">
<h4>Heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="col-12 col-md">
<img src="//placehold.it/500x250/&text=IMG2" class="w-100 mb-4" />
<div class="row justify-content-center">
<div class="col-10 col-md-8">
<h4>Heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">来源：https://stackoverflow.com/questions/63184283/how-to-have-mixed-fluid-and-fixed-width-content-in-the-same-logical-column