如何在bootstrap 4下拉菜单中应用网格系统来使其形状像附加的图像？
在Bootstrap 4下拉菜单中应用网格系统来使其形状像附加的图像，可以通过以下步骤实现：
- 首先，确保你已经引入了Bootstrap 4的CSS和JavaScript文件。
- 创建一个下拉菜单的HTML结构，可以使用Bootstrap提供的
<div>和<ul>标签来构建。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>- 在下拉菜单的
<div>标签上添加row类，以启用网格系统。
<div class="dropdown row">- 在下拉菜单的每个选项上添加
col类，以定义每个选项的宽度。
<a class="dropdown-item col" href="#">Action</a>
<a class="dropdown-item col" href="#">Another action</a>
<a class="dropdown-item col" href="#">Something else here</a>- 如果你想要更细粒度地控制每个选项的宽度，可以使用Bootstrap的网格系统类，如
col-4、col-md-6等。
<a class="dropdown-item col-4 col-md-6" href="#">Action</a>
<a class="dropdown-item col-4 col-md-6" href="#">Another action</a>
<a class="dropdown-item col-4 col-md-6" href="#">Something else here</a>通过以上步骤，你可以在Bootstrap 4下拉菜单中应用网格系统，使其形状像附加的图像。这样可以实现更灵活的布局和样式定制。
推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云对象存储（COS）。
- 腾讯云服务器（CVM）：提供弹性计算能力，可根据业务需求快速创建和管理云服务器实例。了解更多信息，请访问：腾讯云服务器（CVM）
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端对象存储服务，可用于存储和管理各种类型的数据。了解更多信息，请访问：腾讯云对象存储（COS）
相关·内容
2回答
Bootstrap4:粘滞表单元格内的下拉列表
html、css、bootstrap-4、dropdown、sticky
我正在使用Bootstrap 4构建一个表，其中包含一个包含下拉菜单的操作列。我希望该列是粘性的，这样如果有水平滚动，它总是可见的。
前面的坐在下面，后面的坐在上面。
我尝试使用cell和dropdown z-index，但我似乎无法解决这个问题。
.action {
position: sticky;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha3
浏览 6提问于2021-11-25得票数 0
2回答
引导下拉按钮不适用于Angular 8组件
css、angular、drop-down-menu、bootstrap-4、angular8
我正在尝试使用bootstrap4.3类显示下拉菜单，但在菜单上选择后，什么都不会发生，我使用angular 8版本。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false&#
浏览 3提问于2019-07-30得票数 6
回答已采纳
1回答
一个用于多个元素的单一引导下拉菜单
bootstrap-4
我有多个按钮。我希望它们都显示相同的/单一的下拉菜单元素，而不是为每个下拉菜单设置一个单独的下拉菜单。
我希望我能利用数据-目标属性来做到这一点。
此外，我希望能够在任何元素上显示这个单下拉菜单。在我的例子中，表中的第四个元素。我试图让它首先使用按钮(然后可能转到尝试这个元素)，所以我直接从引导带文档中复制了这一点，并稍微修改了一下，但是它不起作用。我想要的东西是可能的吗？
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<scri
浏览 2提问于2019-05-09得票数 2
回答已采纳
1回答
Bootstrap 4下拉按钮宽度
html、css、bootstrap-4
我现在使用的是Bootstrap 4的dropdown。如何更改下面的代码，使单击按钮后出现的下拉菜单与按钮本身的宽度相同？
请注意，按钮的大小可以根据里面的文本而改变，我希望无论文本如何，下拉菜单看起来都是一样的。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown&
浏览 5提问于2018-01-31得票数 2
回答已采纳
4回答
强制引导下拉菜单始终显示在底部，并允许它离开屏幕
drop-down-menu、bootstrap-4、popper.js
当视口底部没有适合下拉菜单的空间时，它将显示在下拉按钮的顶部。是否有可能改变这种行为，使下拉列表始终出现在底部？
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false&
浏览 9提问于2017-11-11得票数 30
回答已采纳
1回答
无法使React组件格式化为Bootstrap样式
javascript、html、css、twitter-bootstrap、reactjs
做一个基本的例子，但是引导样式不适用于来自React组件的按钮。它确实适用于HTML文件中的按钮。我在HTML文件中提供了来自CDN的引导css。运行在简单的python服务器(python -m http.server 8001)上。怎么回事？
例如1.jsx：
// example1.jsx:
var MyPulldown = React.createClass({
render: function () {
return <div class="dropdown">
<button class="
浏览 4提问于2017-10-03得票数 0
回答已采纳
1回答
为什么在调整窗口大小时，当两个div之间的长度小于10时，类`d-none`每次都会切换？
javascript、html、css
主要目标是在right容器和rightButtonGroupWrapper的宽度小于10时隐藏图标，当difference不小于10时隐藏图标 我试图做的是，只有当right container width和right button group之间的长度小于10时，才显示icons。但每次我调整window的大小时，它都会开始切换。我不知道这里有什么问题？ const props = el => el.getBoundingClientRect();
const right = document.querySelector(".right")
const drop
浏览 19提问于2021-09-14得票数 0
回答已采纳
1回答
Bootstrap v4下拉菜单不起作用
javascript、html、css
Idk为什么我正在使用bootstrap v4和下拉菜单，从文档中直接复制和粘贴，不起作用。我也在空白页面上尝试过其他人的例子。没什么。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZ
浏览 0提问于2017-09-05得票数 0
1回答
如何使引导组件与blazor一起工作
bootstrap-4、blazor、.net-6.0
我正在使用.Net6和Blazor。我正在尝试获得一个引导下拉菜单，但该按钮不会下降。我遗漏了什么吗？
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount"&
浏览 0提问于2022-07-19得票数 0
4回答
表中的引导4下拉菜单
html、css、twitter-bootstrap、sass、bootstrap-4
我有一些问题，下拉菜单(启动4)。所以我有张桌子：
当我单击第一行中的设置时，我有一个下拉列表：
但是当我点击第二行的设置时，我有一个与第一行相同的下拉菜单。我怎么能解决呢？
这里有同样的麻烦：
HTML：
<div class="table-responsive">
<table class="table table-hover table-sm">
<thead>
<tr>
浏览 0提问于2018-03-18得票数 1
回答已采纳
2回答
我的bootstrap下拉类无法显示下拉菜单
html、css、bootstrap-4
我已经在我的HTML文件中添加了以下代码来实现bootstrap下拉菜单，但我看不到该下拉菜单。
HTML文件
<div class="tools text-muted d-flex justify-content-around mr-4">
<div class="pr-3 border-right">Filter</div>
<div class="dropdown">
<button class="btn btn-s
浏览 28提问于2020-05-26得票数 2
回答已采纳
1回答
设置引导下拉列表的起始点
html、css、twitter-bootstrap、drop-down-menu、bootstrap-4
你好，我有一个问题，我的引导下拉，每个下拉必须从第一个导航选项是从下面的图片开始。如果你需要更多的信息，只要告诉我，我会把它添加到这篇文章。
我已经做了一些研究，我看到了一些关于超级菜单的例子，但是我无法让它在我的项目中发挥作用，所以我开始自己做。
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/aja
浏览 1提问于2018-10-24得票数 0
回答已采纳
1回答
如何使用带有两列、三列或更多列的下拉菜单？
html、css、bootstrap-4
注意到，在引导4默认情况下，我只能有一个列的下拉菜单，是否有方法使用网格系统在下拉菜单内，以便我可以有多列或任何其他方法？
到目前为止，这是我的代码，但在所有上都不能工作(请注意，它是响应的，所以它将显示为移动而不是桌面，如果分辨率是小的)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity=
浏览 1提问于2019-09-27得票数 0
4回答
bootstrap的下拉按钮不工作
html、twitter-bootstrap、dropdown
我从的第一个示例中复制的下拉代码，但它确实可以在那里工作。我使用Bootstrap v5.0.0-beta2。我将我的所有代码粘贴到以下代码中：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="bootstrap/css/bootstrap.m
浏览 12提问于2021-03-11得票数 1
2回答
引导下拉不正确。
html、css、bootstrap-4、dropdown
当我尝试使用引导程序中的下拉菜单时，它似乎并没有下降。我从网站上复制了确切的代码，以确保我没有遗漏一些东西。
我只有一个文件，一个包含以下代码的HTML文件：
<!DOCTYPE html>
<html>
<head>
<title>Web Dev Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" int
浏览 7提问于2022-07-04得票数 0
回答已采纳
1回答
用于引导程序的除法器右1px
html、css、twitter-bootstrap
我是bootstrap 4的新手，遇到了一个问题。我想把一个1px的除法器放在每一列的右边。
问题是分隔符没有整个卡片高度，因为所有的代码都在一张卡片中。我试了很多次，但都不起作用。如果我设置一个高度: 100px，对于ex，是可行的，但我想这是一个丑陋的解决方案。
有人能告诉我怎么做吗？
.divider-right {
border-right: 1px solid white;
}
.fa {
color: white;
height: 10px;
}
.fa.fa-qrcode {
float: left;
}
.fa.fa-bars
浏览 3提问于2017-08-09得票数 0
回答已采纳
1回答
将@click事件添加到nuxtjs中的bootstrap4 dropdown
javascript、html、css、bootstrap-4、drop-down-menu
我有这个bootstrap 4 dropdown (fiddle here)，在这里我想改变按钮的背景颜色@click。但是当我添加click事件时，它不再隐藏下拉菜单。这是我的代码： //template
<div class="dropdown" :class="{ test: test }">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-to
浏览 42提问于2021-03-25得票数 0
回答已采纳
3回答
如何在bootstrap CSS中阻止下拉菜单向右移动
html、css、bootstrap-4
我目前使用的是bootstrap 4.0。下拉菜单位于屏幕的右上角。当用户单击下拉菜单时，菜单会使页面向右略微扩展，以便在导航栏旁边显示空白。 它看起来是这样的： ? 这是我使用的代码： <div class="dropdown dropdown-left">
<button class="btn btn-secondary dropdown-toggle bg-dark" type="button" id="dropdownMenuButton" data-t
浏览 41提问于2021-09-13得票数 1
2回答
如何将下拉按钮与其他链接锚对齐
javascript、html、css、twitter-bootstrap
“我希望下拉菜单正确地对齐，而不是与屏幕的左边对齐。我要它有反应
.top-section{
padding-top: 2rem;
}
.btn-search{
background-color: #EEEFEE;
border-radius: 0px !important;
}
.fa-search{
color: #8E8F8F;
}
.form-control{
border-radius: 0px !important;
}
.link-end{
text-align: end;
display: flex;
justify
浏览 9提问于2022-01-04得票数 1
回答已采纳
1回答
下拉菜单在引导5中不起作用
html、css、twitter-bootstrap、drop-down-menu
下拉菜单在引导5中不起作用。但是当我添加一些脚本代码时，它是works.For示例：
<script>
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
</script>
当我添加这个代码块时，它是works.But，我的问题是: Bootstrap不需要使用自己的js脚本运行下拉菜单而不添加其他脚本代码吗？
<!DOCTYPE html>
<html lang="en">
<hea
浏览 2提问于2022-02-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
