Bootstrap：调整大小时如何在图像上“粘贴”按钮

Question

我有一个需要在其中放置按钮的图像，问题是我不知道如何放置按钮并在缩小浏览器时自动重新调整大小和位置，现在我有按钮到位，但是当我重新调整浏览器的大小以缩小按钮移动时，我尝试在 css 中使用百分比购买不起作用，我该怎么办？

<div id="discover" class="container-fluid">
<div class="row-fluid"> 
  <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 withimg">
    <img id="discoveryour" src="img/x.png" class="img-responsive">
  </div>  
</div>
<div class="row-fluid"> 
  <div id="bttnimg" class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<form id="start" method="post" action="x.php">
<button class="btn-primary">text</button>
</form> 
</div>
</div>
</div> 

CSS：

  .withimg {
  width: 100%;
  overflow:hidden;
  padding: 0px;
  margin: 0px;
 }

  #discover{
  position: relative;  
 }

#bttnimg{
float: left;
position: absolute;
left: 62%;
top: 25%;
max-width: 750px;

 }

Answer 1

如果您想知道如何使用 bootstrap 5 来做到这一点（像我一样），有一些新类可以解决问题。例如，我这样做是为了在图像的右上方放置一个按钮（我也使用 font-awesome，但您可以使用任何您喜欢的文本/图标作为按钮）：

<div class="card">
    <img class="card-img-top img-thumbnail" src="someimage.png" alt="alt text">
    <div class="card-img-overlay">
        <a href="#" class="btn btn-outline-warning btn-sm float-end"
           data-bs-toggle="popover" data-bs-content="Edit image" data-bs-trigger="hover focus">
            <i class="far fa-edit"></i>
        </a>
    </div>

    <div class="card-body">
        <h5 class="card-title">Some title</h5>
        <p class="card-text">Some text</p>      
    </div>
</div>

查看the official bootstrap documentation 了解更多信息。

Answer 2

啊，古老的“如何在响应式图像上叠加 stuff —— 响应式”问题。

有点棘手，但还不错。棘手的一点是如何使 stuff 的 垂直位置在图像大小发生变化时响应。

别害怕，这里有一种简单的方法：

HTML：

<div class="img-wrapper">
  <img class="img-responsive"
       src="http://lorempixel.com/output/people-q-c-1200-400-4.jpg">
  <div class="img-overlay">
    <button class="btn btn-md btn-success">Button</button>
  </div>
</div>

CSS：

.img-wrapper {
  position: relative;
}

.img-responsive {
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust 'height' to position overlay content vertically */
  height: 50%;
}

img-overlay:before 伪类通过将img-overlay div 从图像顶部向下推来处理垂直定位工作。在此示例中，按钮的顶部始终位于图像下方 50%（如果您希望按钮更高或更低，请更改 height: 50% 属性）。

jsfiddle

要使按钮 size 响应窗口宽度，您可以为按钮创建一个新类。我们称它为btn-responsive（这将替换上面示例中的btn-md）。然后使用@media 查询来调整btn-responsive 属性以适应不同的窗口宽度。像这样的：

.btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) {
  /* matches 'btn-xs' */
  .btn-responsive {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}

其他屏幕宽度以此类推。

Answer 3

我要问是否有可能将表单标签替换为另一个DIV？然后你可以使用position: absolute 作为按钮。我创建了小提琴来展示https://jsfiddle.net/1x1pjwk7/