Bootstrap 4 Carousel Fullscreen 当'PageWrap'（容器）宽度：1140px答案

【问题标题】：Bootstrap 4 Carousel Fullscreen when 'PageWrap'(container) width: 1140pxBootstrap 4 Carousel Fullscreen 当'PageWrap'（容器）宽度：1140px
【发布时间】：2021-03-13 04:52:03
【问题描述】：

我希望 Bootstrap 4 轮播扩展浏览器窗口的整个宽度。使用 Bootstrap 4 中的轮播组件，但轮播并未包裹整个窗口屏幕。

使它全宽和响应式的最佳方法是什么？或者通过将轮播放在“PageWrap”下，我走错了路。但在我看来，不建议将 App 的组件放在此处定义的“PageWrap”容器之外。

这是我的代码：

import React from 'react';
import "../../src/App.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Carousel, CardDeck, Card, Button, Navbar, Nav } from "react-bootstrap";
import { TwitterOutlined, FacebookOutlined, YoutubeOutlined, PauseOutlined, SearchOutlined } from '@ant-design/icons';

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div class="PageWrap">
        <content>
<Carousel>
  <Carousel.Item>
    <img class= "d-block w-100 h-100" src={require("../Assets/Images/hair_salon_1.jpg").default}/>
</Carousel.Item>
<Carousel.Item>
    <img src={require("../Assets/Images/hair_salon_2.jpg").default}/>
</Carousel.Item>
<Carousel.Item>
    <img src={require("../Assets/Images/hair_salon_3.jpg").default}/>
</Carousel.Item>
  </Carousel>
  </content>
</div>
    );
  }
}
export default App;

为了解决这个问题，需要向 CSS 样式表添加什么规则以强制轮播图像在屏幕上始终全宽。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

为了设置全宽页面，对我来说最好的方法是从

<div class="container">
  <!-- Content here -->
</div>

到

<div class="container-fluid">
  <!-- Content here -->
</div>

它允许轮播完成 100% 的页面宽度。

参考：link

【讨论】：