当‘PageWrap’(容器)宽度: 1140px时，引导4轮转盘全屏

Question

我希望Bootstrap 4 carousel能够扩展浏览器窗口的整个宽度。使用来自Bootstrap 4的轮播组件，但是轮播没有包裹整个窗口屏幕。

使其全宽度和响应性的最佳方法是什么？或者我把carousel放在'PageWrap‘下面，这是错误的。但在我看来，不建议将应用程序的组件放在这里为'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样式表中，以强制轮播图像在屏幕上始终是全宽的。

Answer 1

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

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

至

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

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

参考：link