文本在引导程序中不断按下按钮答案

【问题标题】：Text keeps pushing the button in bootstrap文本在引导程序中不断按下按钮
【发布时间】：2021-03-08 11:26:46
【问题描述】：

所以，我有一些<p> 标签和一个文本，它位于按钮的左侧。如果文本不断变大，按钮会一直向右推。我想将所有按钮放在每个 div 的右下角。这是我的 HTML：

#dugme {    
  font-weight: bold;
  left: 15vw;
  line-height: 2vw;
  color: white;
  background-color: rgb(17, 142, 146);
  text-align: center;
  border: white 2px solid;
}

#dugme:hover{
  background-color: aliceblue;
  color: rgb(17, 142, 146);
}

#stripovi {
  padding-top: 2em;
  margin-bottom: 1em;
  margin-left: 10px;
}

#comic {
  display: inline-block;
  background-color: rgb(230, 200, 119);
  border-radius: 3px;
  margin-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px;

}

.naziv {
  font-family: 'Fredoka One', cursive;
  float: right;
  margin-top: 100px;
  word-wrap: break-word;
  margin-top: auto;
  margin-left: auto;
}

.container-fluid{
  background-color: rgb(74, 198, 202);
}

<div class="row" id="stripovi">
      <div class="comic w-50">
          <div class="comic-img-top d-flex align-items-center form-group" id="comic">
              <div class="thumbnail">
                  <img class="img-responsive" src="slike/c1.jpg" alt="comicbook">
                  <div class="naziv">
                      <p class="col p-2 m-0">Heavy Metal Comic</p>
                      <p class="col p-2 m-0" style="color: rgb(155, 151, 151); text-align: left;">ID:0101</p>
                  </div>
              </div>
              <div class="form-group">
                  <button type="button" class="btn btn-info" id="dugme">Dodaj</button>
              </div>
          </div>
      </div>
      <div class="comic w-50">
          <div class="comic-img-top d-flex align-items-center form-group" id="comic">
              <div class="thumbnail">
                  <img class="img-responsive" src="slike/c2.jpg" alt="comicbook">
                  <div class="naziv">
                      <p class="col p-2 m-0">Deadly Class</p>
                      <p class="col p-2 m-0" style="color: rgb(155, 151, 151); text-align: left;">ID:0101</p>
                  </div>
              </div>
              <div class="form-group">
                  <button type="button" class="btn btn-info" id="dugme">Dodaj</button>
              </div>
          </div>
      </div>
  </div>

This is what the buttons look like.在第二部漫画中可以看到，文字将按钮向右移动。我想让每个产品的按钮保持在相同的位置，该位置将是这个矩形的右下角。

提前谢谢你！

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您可以添加 position: relative 到 comic-img-top 删除 id="comic" 并改用类。 ID 应该是唯一的，所以你不应该重复它。将另一个自定义类添加到 form-group，即包含按钮的容器。

CSS

    position: absolute;
    bottom: 0;
    right: 0;

这会给你想要的结果


#comic { // Make this  a class and not an ID if it is going to be repeated
    position: relative;
}

.form-group.new-button-container-class{
    position: absolute;
    bottom: 0;
    right: 0;
}

<HTML>
<div class="form-group new-button-container-class">
                    <button type="button" class="btn btn-info" id="dugme">Dodaj</button>
                </div>

【讨论】：

谢谢，你是救命稻草！你不知道我挣扎了多久，在互联网上也没有与我的问题相似的东西。我最后的选择是在这里发布问题。

【解决方案2】：

添加一个

position: absolute;

object.style.position="absolute"

对于总使用变化：

 #dugme {    
    font-weight: bold;
    left: 15vw;
    line-height: 2vw;
    color: white;
    background-color: rgb(17, 142, 146);
    text-align: center;
    border: white 2px solid;
}

到：

 #dugme {    
    font-weight: bold;
    left: 15vw;
    line-height: 2vw;
    color: white;
    background-color: rgb(17, 142, 146);
    text-align: center;
    border: white 2px solid;
    position: absolute;
}

现在您需要做的就是将所有内容对齐。

【讨论】：

我对 JS 还不是很熟悉，虽然我可以尝试一下。不幸的是，这不起作用，只会让问题变得更糟。
您不必使用 javascript 选项。您可以将我列出的 CSS 选项添加到我的答案之上。编辑：我改变了我的答案。这应该有效。
谢谢，但不幸的是这仍然不起作用。最后，另一个人的评论解决了它。还是谢谢你！