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

Posted 2023-03-05

【中文标题】小型设备上轮播中的按钮封面图像

【英文标题】：Button cover image in carousel on small devices

【发布时间】：2021-04-02 14:23:21

【问题描述】：

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

<Carousel>
  <Carousel.Item interval=60000 style= position: "relativ" >
    <img className="d-block w-100 " src=firstslide  />
    <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>

【参考方案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'
          
          
        />
      </Carousel.Item>
    </Carousel>

看看

【讨论】：

现在我无法移动图像上的按钮。@Shrroy

对不起，我没有解释清楚。按钮应该在图片上，但不能覆盖手机。在小型设备上。 @Shrroy

@MatijaMilicevic 我会修复它