以 100% 宽度反应旋转木马答案

【问题标题】：react carousel with 100% width以 100% 宽度反应旋转木马
【发布时间】：2023-04-02 18:25:01
【问题描述】：

我在反应中有以下轮播代码。

<Carousel activeIndex={index} onSelect={handleSelect} >
    <Carousel.Item>
        <img
            className="d-block w-100"
            height="500"
            src="/images/taj.jpg"
            alt="First slide"
        />
        <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
        <img
            className="d-block w-100"
            height="500"
            src="/images/moon.jpg"
            alt="Second slide"
        />

        <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
        <img
            className="d-block w-100"
            height="500"
            src="/images/pebbles.jpg"
            alt="Third slide"
        />

        <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>
                Praesent commodo cursus magna, vel scelerisque nisl consectetur.
            </p>
        </Carousel.Caption>
    </Carousel.Item>
</Carousel>

我尝试将 Carousel 包装在一个 div 中，并在 img 标签的 div 和 width 属性上将宽度设置为 100%，但图像两侧仍然存在小间隙我在下面用黄色突出显示了间隙截图，请建议如何删除这个多余的空白。

【问题讨论】：

尝试从开发工具中检查元素并检查是否有任何填充。
感谢您的回复，我在检查元素中看不到任何填充
如果您可以添加代码框来展示您的代码，那么我们可以更好地帮助您。
我遇到了这个问题，很抱歉我没有发布我的 index.js，我在一个带有容器流体的 div 中调用它，根据文档容器流体应该获得 100% 的宽度但流体导致这个额外的空间不确定原因，请你帮我理解为什么流体的行为异常？

标签： reactjs twitter-bootstrap carousel

【解决方案1】：

默认情况下，每个引导容器都有额外的15px 水平填充，这就是为什么您的内容没有占据全宽，因此您可以使用引导类p-0 删除此填充。这里是完整的例子：

.container{
height:100px;
background-color:blue
}
.container-fluid{
height:100px;
background-color:red
}
.content{
width:100%;
height:100%;
color:white;
background-color :rgba(0,0,0,0.5)
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<div class="content">container default padding</div></div>
<div class="container-fluid"><div class="content">container fluid default padding</div></div>
<div class="container p-0">
<div class="content">container without padding</div></div></div>
<div class="container-fluid p-0"><div class="content">container fluid without padding</div></div>

【讨论】：

这也解决了我的另一个问题，非常感谢您的帮助。