反应宽度100％的转盘

问题描述

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

<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属性上将width设置为100％，但是图像的两侧仍然留有小缝隙，我在下面用黄色突出显示了该缝隙屏幕截图，请建议如何删除此多余的空白。

解决方法

默认情况下，每个引导容器都有额外的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.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>