反应 carousel 100% 宽度

Question

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

<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 中，并在 div 和 img 标签的 width 属性上将宽度设置为 100%，但图像两侧仍然留有小间隙我在下面的屏幕截图中用黄色突出显示了间隙，请建议如何删除这个多余的白色 space.

Answer 1

默认情况下，每个 bootstrap 容器都有额外的 15px 水平填充，这就是为什么您的内容不占满宽度的原因，因此您可以使用 bootstrap class 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>

反应 carousel 100% 宽度

react carousel with 100% width

carousel

twitter-bootstrap

reactjs