小型设备上轮播中的按钮封面图像

Question

您好，我在覆盖图像的小型设备上遇到了按钮和文本问题。我试图放置绝对位置和相对位置，但它不起作用。如何固定按钮和文本的位置？

<Carousel>
  <Carousel.Item interval={60000} style={{ position: "relativ" }}>
    <img className="d-block w-100 " src={firstslide} alt="First slide" />
    <Carousel.Caption
      className="d-block"
      style={{
        left: 0,
        position: "absolute",
        width: " 50%",
        top: "2%",
        color: "black",
      }}
    >
      <h3>iPhone 12</h3>
      <div class="btn-group" role="group">
        <a
          className="btn btn-success"
          style={{
            backgroundColor: "#36d99a",

            padding: "5px 30px 5px 30px",
            marginRight: "10px",
            borderRadius: "5px",
          }}
        >
          Buy
        </a>
        <a
          className="btn btn-success"
          style={{
            backgroundColor: "#36d99a",
            padding: "5px 10px 5px 10px",
            borderRadius: "5px",
          }}
        >
          Learn More
        </a>
      </div>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>

Answer 1

我刚刚将 Carousel.Caption 更改为 relative 它可以工作

<Carousel>
      <Carousel.Item
        interval={60000}
        style={{ position: 'relativ' }}
      >
        <Carousel.Caption
          className="d-block"
          style={{
       right: 0,
        position: 'relative',
        left: 0,
        margin: '0 auto',
        top: '2%',
        color: 'black',
          }}
        >
          <h3>iPhone 12</h3>
          <div class="btn-group" role="group">
            <a
              className="btn btn-success"
              style={{
                backgroundColor: '#36d99a',
                padding: '5px 30px 5px 30px',
                marginRight: '10px',
                borderRadius: '5px',
                minWidth: 150,
              }}
            >
              Buy
            </a>
            <a
              className="btn btn-success"
              style={{
                backgroundColor: '#36d99a',
                padding: '5px 10px 5px 10px',
                borderRadius: '5px',
                minWidth: 150,
              }}
            >
              Learn More
            </a>
          </div>
        </Carousel.Caption>
        <img
          className="d-block w-100 "
          src={
            'https://www.gizmochina.com/wp-content/uploads/2020/05/iphone-12-pro-max-family-hero-all-600x600.jpg'
          }
          alt="First slide"
        />
      </Carousel.Item>
    </Carousel>

看看