容器流体在Bootstrap 3.4不水平伸展100％ [英] container-fluid in Bootstrap 3.4 not stretching horizontally 100%

问题描述

我遇到与上一个问题相同的问题：

但是当我将窗口缩小到大约一半时，它会到达左右两侧。

您会看到 .container 对于每个媒体断点都有固定宽度除了额外的小型设备， .container-fluid 具有所有媒体断点的完整宽度：

  .container {
 padding-right：15px; 
 padding-left：15px; 
 margin-right：auto; 
 margin-left：auto; 
} 
 @media（min-width：768px）{
 .container {
 width：750px; 
} 
} 
 @media（min-width：992px）{
 .container {
 width：970px; 
} 
} 
 @media（min-width：1200px）{
 .container {
 width：1170px; 
} 
} 
 .container-fluid {
 padding-right：15px; 
 padding-left：15px; 
 margin-right：auto; 
 margin-left：auto; 
} 
  

因此，如果要为每个媒体断点设置全宽，请使用 .container-fluid

I'm having the same issue as my previous question: div doesn't expand all the way horizontally

All I have in my render() function is

render() {
    return (
        <div className="container intro-body">
        </div>
    )

With CSS for intro-body like so (for color)

.intro-body {
    height: 582px;
    background-color: #3BC5C3;
}

On full screen on a 13 inch Macbook, the left and right sides are white spaces. It seems like there's padding or margin of some sort.

But when I shrink my window to about half the size, it reaches the left and right sides

Can someone explain this strange phenomenon? Is this something in Bootstrap that I'm not aware of? I was told to use container-fluid but 1. I think it's removed in Bootstrap 3 and 2. It didn't work when I tried it.

解决方案

If you look at the bootstrap source you would see that .container has fixed widths for every media breakpoint except for extra small devices, and .container-fluid has full width for all media breakpoints:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

So if you want to have fullwidth for every media breakpoint, use .container-fluid.

这篇关于容器流体在Bootstrap 3.4不水平伸展100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！