Html 文本在引导中不断按下按钮_Html_Css_Bootstrap 4

Html 文本在引导中不断按下按钮

html css bootstrap-4

Html 文本在引导中不断按下按钮,html,css,bootstrap-4,Html,Css,Bootstrap 4,因此，我有一些标签和一个文本，它位于按钮的左侧。如果文本不断变大，则按钮会一直向右推。我想将所有按钮放置在每个div的右下角。以下是我的HTML： #dugme{ 字体大小：粗体；左：15vw；线高：2vw；颜色：白色；背景色：rgb（17142146）；文本对齐：居中；边框：白色2px实心； } #达格米：悬停{ 背景色：aliceblue；颜色：rgb（17142146）； } #斯提波维{ 垫面：2米；边缘底部：1米；左边距：10px； } #滑稽的{ 显示：内联块；

因此，我有一些

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

#dugme{
字体大小：粗体；
左：15vw；
线高：2vw；
颜色：白色；
背景色：rgb（17142146）；
文本对齐：居中；
边框：白色2px实心；
}
#达格米：悬停{
背景色：aliceblue；
颜色：rgb（17142146）；
}
#斯提波维{
垫面：2米；
边缘底部：1米；
左边距：10px；
}
#滑稽的{
显示：内联块；
背景色：rgb（230200119）；
边界半径：3px；
右边距：15px；
边缘顶部：5px；
边缘底部：5px；
}
纳齐夫先生{
字体系列：“弗雷多卡一号”，草书；
浮动：对；
边缘顶部：100px；
单词包装：打断单词；
页边顶部：自动；
左边距：自动；
}
.容器液体{
背景色：rgb（74198202）；
}


重金属漫画
ID:0101
多达伊
致命级别
ID:0101
多达伊

您可以添加

位置：相对于漫画img top
删除id=“comic”，改为使用类。ID应该是唯一的，所以你不应该重复它。
将另一个自定义类添加到FormGroup，即保存按钮的容器
CSS
这会给你想要的结果

#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>


#漫画{//如果要重复，请将其设置为类而不是ID
位置：相对位置；
}
.form-group.new-button-container-class{
位置：绝对位置；
底部：0；
右：0；
}
多达伊
添加一个
位置：绝对位置；

这使你的元素保持在一个位置上。因此，此函数称为绝对函数。position
属性指定用于元素的定位方法类型（静态、相对、绝对、固定或粘滞）。它的语法将用作位置：静态|绝对|固定|相对|粘性|初始|继承。或者，如果您喜欢使用javascript方法：
object.style.position=“绝对”

总用途变更：
#dugme{
字体大小：粗体；
左：15vw；
线高：2vw；
颜色：白色；
背景色：rgb（17142146）；
文本对齐：居中；
边框：白色2px实心；
}

致：
#dugme{
字体大小：粗体；
左：15vw；
线高：2vw；
颜色：白色；
背景色：rgb（17142146）；
文本对齐：居中；
边框：白色2px实心；
位置：绝对位置；
}

现在，您需要做的就是将所有内容对齐。我对JS仍然不太熟悉，尽管我可以尝试一下。不幸的是，这不起作用，但只会使问题变得更糟。您不必使用javascript选项。你可以通过我在答案上面列出的CSS选项。编辑：我已经改变了我的答案。这应该行得通。谢谢，但不幸的是，这仍然行不通。另一个人的评论最终解决了这个问题。无论如何谢谢你！谢谢，你是救命恩人！你不知道我挣扎了多久，在互联网上也没有什么能比得上我的问题。我最后的选择是在这里发布一个问题。

#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>