使用CSS和Bootstrap定位按钮
可以通过以下步骤实现：
- 首先，确保在HTML文件中引入了Bootstrap的CSS文件和相关的JavaScript文件。可以通过以下链接获取最新版本的Bootstrap文件：
- 在HTML文件中创建一个按钮元素，可以使用
<button>标签或者<a>标签来创建按钮。例如： - 在HTML文件中创建一个按钮元素，可以使用
<button>标签或者<a>标签来创建按钮。例如： - 使用CSS来定位按钮。可以通过为按钮元素添加CSS类或者直接在HTML文件中使用内联样式来实现。以下是一些常用的定位方法：
- 使用
position属性来设置按钮的定位方式，可以选择relative、absolute、fixed等。例如： - 使用
position属性来设置按钮的定位方式，可以选择relative、absolute、fixed等。例如： - 使用
top、right、bottom、left属性来设置按钮相对于其父元素的偏移量。例如： - 使用
top、right、bottom、left属性来设置按钮相对于其父元素的偏移量。例如： - 使用
margin属性来设置按钮与其他元素之间的间距。例如： - 使用
margin属性来设置按钮与其他元素之间的间距。例如：
- 使用
- 使用Bootstrap的CSS类来进一步定位按钮。Bootstrap提供了一系列的CSS类，可以用于快速定位和布局元素。例如，可以使用
text-center类将按钮水平居中： - 使用Bootstrap的CSS类来进一步定位按钮。Bootstrap提供了一系列的CSS类，可以用于快速定位和布局元素。例如，可以使用
text-center类将按钮水平居中：
总结：
使用CSS和Bootstrap定位按钮可以通过设置按钮的position属性、偏移量属性和使用Bootstrap的CSS类来实现。通过合理的定位和布局，可以使按钮在页面中达到预期的位置和效果。
腾讯云相关产品和产品介绍链接地址：
相关·内容
3回答
我想减少黑色背景宽度，使其更符合图像和按钮。
这是页面上某个组件的代码。其他组件的代码也是类似的。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
浏览 7提问于2022-09-08得票数 1
我尝试创建一个输入组和输入组旁边的一些按钮，但这些按钮总是切换到新行。有谁能帮帮我吗？ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<
浏览 22提问于2021-10-08得票数 0
回答已采纳
这个登录是用boostrap 4制作的，实际上它是我自定义的一个预置。我是boostrap和css的新手，不知道如何让它响应。在调整窗口大小时，顶部会被截断并且不能滚动。它不会缩小规模。 登录页面： .login-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 340px;
}
.login-form form {
margin-bottom: 15px;
background: #101010;
浏览 39提问于2020-06-12得票数 0
4回答
引导按钮填充不加载
、、、
我正试着让一些按钮在Bootstrap 5中工作：
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-12">
<a cl
浏览 8提问于2021-01-04得票数 0
回答已采纳
2回答
我无法将我的文本放在top上的jumbotron中。
这是我的密码
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="jumbotron" style="text-align:center; background-image: url(img/propdev.jpg); background-size: cover; h
浏览 4提问于2016-11-19得票数 1
回答已采纳
2回答
我在Bootstrap中使用了以下html代码： <div class="cell-xs-10 cell-md-6">
<div>
<div class="text-center offset-top-20">
<input id="buy" type="submit" class="btn btn-primary">
<input id="buy" type="sell" class=&
浏览 24提问于2020-01-25得票数 0
2回答
我对在iOS 12上的Safari中的iframes中显示的引导4.1调制解调器有问题，所有其他浏览器测试都按预期工作(甚至iOS 11上的Safari )。这个问题似乎是iOS 12特有的。
我创建了一个。前两个按钮的功能似乎与预期的一样，但是在最后4个按钮中，您可以看到问题，每个按钮在向下遍历时都会变得更糟，最后一个按钮在试图滚动或专注于模式内的元素时一起消失(见下面的屏幕截图)：
我要注意的是，我们正在以一种可能有点非正统的方式处理这个功能，因为我们没有允许iframe的内容滚动，而是通过通过message事件处理程序和postMessage在父级和子级之间传递消息来调整它
浏览 1提问于2019-08-15得票数 7
回答已采纳
我想把h4和button垂直地放在页面的中心。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<section class="c
浏览 2提问于2021-02-09得票数 0
回答已采纳
1回答
我试图在点击和悬停事件上显示引导弹出。
我在一个页面上加载了多个控件，并且我试图绑定引导-5弹出，而没有这些控件的jQuery依赖。
在本例中，我使用了按钮和锚元素，并试图使用JavaScript绑定弹出程序，当使用事件悬停(触发器：“悬停”)时，弹出将为按钮和锚元素触发，但对于事件单击(触发器：“焦点”)，弹出将不会显示锚元素。
我使用了下面的代码将事件绑定到控件。
document.addEventListener("DOMContentLoaded", function(event) {
var popoverTriggerList = [].slice.call
浏览 8提问于2022-09-27得票数 0
回答已采纳
1回答
尝试切换2个div
、、、
我已经找到了很多关于切换div的答案，但没有一个是我想要的。我想有2个按钮(网格和列表视图)。当页面加载时，网格div是可见的。如果有人单击列表视图按钮，网格div将转到display: none，列表div将显示:block。如果您碰巧在列表div已经显示时再次单击列表视图按钮，则不会发生任何事情。但是如果你点击网格视图按钮，div会再次切换，反之亦然。 我所做的就是点击"list view“按钮来显示那个div，但它并不会使网格视图消失。只有单击网格视图按钮，网格才会消失。我确信我在这里完全忽略了一个逻辑，我为我现在有一个油炸的大脑而道歉。但我只是越来越沮丧。 下面是我的代码：
浏览 13提问于2021-07-29得票数 2
回答已采纳
好的，已知问题-- bootstrap等高列。我有一个包含3个cols的行，在cols中有一个带有"h-100“的div，使cols的高度相等，这是一个”边界“，所以线在cols内部，并且cols之间有一个光学间隙。然后是内容(图像、标题、文本)和一个按钮。此按钮应始终放置在列的底部。 我找到了一个绝对位置的解决方案，但我认为这不是最优解决方案。我试着用flexbox解决这个问题，但是找不到可行的方法。也许有人知道如何通过"align-end“以适当的方式完成这项工作。 对任何想法都很感谢。 演示：jsfiddle p.btn-bottom {
position: a
浏览 16提问于2021-04-16得票数 1
回答已采纳
1回答
我有一个简单的问题:当我使用下拉引导时，如果我检查元素，我可以看到一些内联添加的属性：
position: absolute;
inset: auto auto 0px 0px;
margin: 0px;
transform: translate(0px, -40px);
我怎么才能把这个移除？我希望我的元素中心与我的按钮，而不是在右边或左边。因此，对于这一点，要使用位置绝对和顶部和左不嵌入。除非还有别的可能性？我把引导的例子抛在后面。
.dropup {
margin-top: 8rem;
}
<script src="https://cdnjs.cloudflare.
浏览 4提问于2022-03-28得票数 0
我具有动态添加/删除输入的功能。加法工作良好，但移除不想工作。我找到了该功能的jQuery实现，并试图将其转换为纯JS。这就是实现删除的方法(我在jQuery上测试了它，并在它上工作)。
$(document).on('click', '#removeRow', function () {
$(this).closest('#inputFormRow').remove();
});
var i = '2';
document.getElementById('addRow').addEventListene
浏览 9提问于2021-05-02得票数 0
回答已采纳
我正在尝试使用引导程序对我的项目进行样式化，但是我一直得到一个CORS策略Error.My站点，它只显示没有样式的股票HTML。单击“添加到表”按钮不会打开模式。也不知道为什么加载样式。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=dev
浏览 0提问于2020-03-04得票数 0
回答已采纳
2回答
我可以使用一些帮助，因为我是新的html编码。不管怎样，我用bootstrap做了一个旋转木马。旋转木马本身运行良好。但是在旋转木马中放置一个按钮后(使用top：(px)和right：(px)，因为我不知道如何将它放在我想要的位置)，它仍然工作得很好。直到我开始调整窗口大小。背景变小了，但按钮的大小保持不变。所以它开始四处移动，曾经相邻的两个按钮，现在变成了两个按钮，它们之间有很大的空间。这里，看看我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"&
浏览 0提问于2017-04-16得票数 0
回答已采纳
1回答
我有一个问题，引导按钮的+符号，它的中心不像这个图像：
。
我试图用带有button类的div包装这个justify-content-center align-content-center text-center。
.btn-plus {
display: inline-block;
background: url(https://via.placeholder.com/30) center no-repeat;
background-size: contain;
width: 30px;
height: 30px;
}
<link rel="sty
浏览 2提问于2022-03-29得票数 0
1回答
需求：
只有按钮应该是水平滚动的。
按钮的下拉式应该在正确的位置，也就是就在按钮的下方。
下拉按钮不应移动下面的段落，而应仅位于段的顶部。
我尝试过的事物：
overflow:hidden/auto
overflow-x:auto
position:static确实有效，但它将内容推倒。
.outer {
border: 2px solid red;
width: 70%;
margin: auto;
display: flex;
overflow: auto;
height: max-content;
margin-
浏览 1提问于2018-09-29得票数 2
回答已采纳
我试图把我所有的按钮连成一行，使一个微型个人项目的计算器与learn...however，因为进入是更长，它占用更多的空间。我该如何排列所有的按钮？
#entry {
background-color: white;
border: solid black 2px;
margin-bottom: 0.25em;
width: fit-content;
flex-grow: 1;
}
.calc-container {
width: 20%;
justify-content: flex-start;
}
.row {
background-color: g
浏览 3提问于2022-07-07得票数 0
在一个引导程序card中，我添加了两个card-body和一个按钮，点击它就会隐藏其中的一个。
预期的行为是每次用户单击按钮卡11111和2222卡消失时。如果再次点击按钮，2222出现，11111卡消失等.
我编写了以下代码，在第二次单击中完全隐藏了两个div.我在这里错过了什么？
$(".toggle-executed").on('click', function(e) {
$(this).closest(".card-body").slideToggle('slow', function() {
$(thi
浏览 4提问于2022-11-23得票数 0
回答已采纳
3回答
引导程序在本地不起作用
、、、
尝试在本地使用Bootstrap时遇到问题。我已经在JsFiddle和其他在线编辑器上尝试过完全相同的代码，效果很好。但是，当我将代码迁移到我的括号IDE实例中时，什么都不起作用。如果有人能说明一下情况，我将不胜感激。下面我附上了一小段代码。
注意:样式是有效的，就像每当我将一个分类为面板时，样式就会发生变化。我遇到的问题是，风格的改变是相关的。示例btn-带有单选/切换按钮的组，每当我单击某项内容时，什么都不会发生。
<html>
<head>
<link rel="stylesheet" type="text/css"
浏览 0提问于2014-09-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
