bootstrap 4中的对齐嵌套按钮组
在Bootstrap 4中，对齐嵌套按钮组是一种将多个按钮组嵌套在一个父按钮组中，并通过对齐方式来控制它们的布局的技术。
对齐嵌套按钮组可以通过使用Bootstrap提供的CSS类来实现。以下是一些常用的类：
.btn-group：用于创建按钮组的容器。.btn：用于创建按钮。.btn-group-vertical：用于创建垂直排列的按钮组。.btn-group-toggle：用于创建可切换按钮组。.btn-group-justified：用于创建平均分布的按钮组。
通过将这些类应用于按钮元素，可以实现对齐嵌套按钮组的效果。以下是一个示例代码：
<div class="btn-group">
<button type="button" class="btn btn-primary">按钮1</button>
<button type="button" class="btn btn-primary">按钮2</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
下拉按钮
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">下拉项1</a>
<a class="dropdown-item" href="#">下拉项2</a>
</div>
</div>
</div>在上面的示例中，我们创建了一个按钮组，并在其中嵌套了两个按钮和一个下拉按钮。通过使用.btn-group和.btn-group-toggle类，我们实现了按钮组的对齐和切换功能。
对齐嵌套按钮组在各种场景中都有广泛的应用。例如，在网页表单中，可以使用对齐嵌套按钮组来实现多选按钮或单选按钮的布局。在导航栏中，可以使用对齐嵌套按钮组来创建下拉菜单。
腾讯云提供了一系列与云计算相关的产品，其中包括适用于前端开发、后端开发、数据库、服务器运维等各个领域的产品。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多信息。
相关·内容
2回答
我对 (以及一般的前端工作)相当陌生。使用React-Bootstrap时，对齐元素的最佳实践是什么？
例如：
<Grid>
<Row className="show-grid">
<Col md={10}>
<Input type="text" label="Filter"/>
</Col>
<Col md={2}>
<Button>Clear</Button&
浏览 0提问于2016-01-05得票数 10
回答已采纳
1回答
我试着在垂直布局中嵌套的按钮上做垂直移动动画。我不确定Hgroup是否限制了按钮的垂直移动。有什么办法可以绕过它吗？谢谢你的帮助。
<s:states>
<s:State name="default"/>
<s:State name="addRecommend"/>
<s:State name="seeOther"/>
</s:states>
AS:
protected function add_clickHandler(event:MouseEvent):void
{
curre
浏览 0提问于2010-06-18得票数 0
回答已采纳
2回答
我想要将多行标签添加到具有顶部对齐的tablerowcontroller。唯一的对齐选项是左/右等。看起来它会自动将文本垂直居中。无论如何，强制顶部对齐？使用iOS8/Xcode 6.3.2
浏览 2提问于2015-07-11得票数 1
1回答
我正在使用twitter bootstrap。下面是我的代码：
<div class="control-label">
We
<div class="btn-group">
<a href="javascript:;" data-toggle="dropdown" class="btn dropdown-toggle">
<span>search</span> &
浏览 0提问于2012-08-04得票数 0
回答已采纳
3回答
图像显示了Bootstrap 3和Bootstrap 4拆分按钮下拉对齐的比较。我更喜欢Bootstrap 3，它将它与第一个按钮的左侧对齐，而不像Bootstrap 4，它只根据第二个按钮对齐。
有没有人有一个快速解决方案来将菜单对齐到第一个按钮的左侧？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com
浏览 19提问于2018-08-09得票数 4
回答已采纳
3回答
夏季按钮变高
、、、
我有一个夏季笔记WYSIWYG编辑器在一个启动模式。它使用自定义工具栏。(尽管如此，使用默认工具栏仍会出现此问题)。
正如您在下面的图片中所看到的，一些按钮的高度是不同的。这是特别明显的下拉旁边的颜色变化按钮。
是否缺少强制按钮大小相同的文件或定义？
下面是我所包含的CSS文件：
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet&#
浏览 4提问于2014-07-06得票数 3
回答已采纳
当我们使用bootstrap时，我们使用"row“来表示全宽，在它里面我们使用容器来表示任何屏幕的一些宽度，但是scroll出现在我们的站点中，但是我们使用所有的bootstrap类和宽度，但是滚动条也会出现--为什么？
请给我一些建议
浏览 7提问于2015-05-27得票数 0
在我的VueJS应用程序中使用bootstrap-vue，我想在一行中放置一个按钮和一个警告，两个项垂直居中对齐。
正如您在此中看到的，按钮是对齐的，但警报没有对齐。
如何对齐所有项目？
浏览 1提问于2020-12-23得票数 0
我想在Bootstrap 4导航栏上放置一些自定义图标按钮。我试着用这样的方式放置按钮：
<a class="nav-item" href="#">
<img class="png-icon d-inline-block align-middle" src="assets/png-icons/zoom full.png">
</a>
该按钮显示在导航栏上，但它在顶部对齐。我想让它居中对齐(垂直)。我尝试了所有类型的CSS样式，如页边距-顶部和填充-顶部，但它没有改变任何东西。我也试过使用
浏览 18提问于2017-06-28得票数 0
回答已采纳
在最新的Bootstrap 4中，我尝试在search input中添加一个x。
我可以简单地使用
<input type="search" placeholder="Search..." />
但这在Firefox中不受支持...
我试过使用addon和negative margins，但不知何故Bootstrap隐藏了我的按钮...
<div class="input-group">
<input type="text" class="form-control" place
浏览 0提问于2018-10-19得票数 11
回答已采纳
我有一个按钮与一些文本和插入符号与CSS制作。我希望插入符号浮动到按钮的右侧。但是，当我使用CSS的float:right (或Bootstrap的pull-right)执行此操作时，垂直对齐方式发生了变化，插入符号位于文本行的顶部。下面是我的代码：
<button style="width:150px">
Button Text <span style="float:right" class="caret"></span>
</button>
下面是我在使用和不使用float:right的情况下看
浏览 0提问于2017-05-15得票数 1
我正试图将td中的一些内容与右边对齐。Align=“右”起作用，但文字对齐:右不起作用。下面是一个显示这两种情况的示例。除了右对齐右列外，这两种情况是相同的。如您所见，在第二种情况下，‘按钮1’是对齐的，当我期望它对齐到右边时。
加法：
我使用第三方控件来添加表。所以没有“你应该使用css而不是表格讨论请”。
浏览 2提问于2012-02-10得票数 3
回答已采纳
3回答
我试图创建一个简单的两列布局，其中有一个大图像，然后两个列，左一个为图像右一个为文本。
但我无法将图像列与顶部的大图像对齐。我可以添加一个具有-15 is边距的类，但是在XS屏幕大小上会出现对齐错误。
我还可以为xs屏幕添加另一个-15 fix边距，然后我可能需要修复其他东西。这是一个如此基本的布局问题，我有一种感觉，我做错了什么。
你们能建议我做错了什么吗?我应该如何处理Bootstrap 3中的两列布局？
这是
浏览 8提问于2014-07-09得票数 0
回答已采纳
1回答
我的测试代码中有两个元素。一个闭合路径元素和一个矩形元素。我使用svg.draggable.js库来拖动这两个元素。rect元素看起来拖动得很好，但当我单击并尝试拖动它时，path元素就消失了。有人能解释一下是怎么回事吗?我怎样才能让path元素变得可拖动？ < body >
<
div id = "curve" >
<
/div> <
div id = "drawing" > < /div> <
script id = "jscript" >
va
浏览 17提问于2019-02-11得票数 0
回答已采纳
我有下面的例子来说明我是如何尝试使用引导崩溃javascript特性的。
即使当打开不同的div时，所有其他div都关闭，第6个div仍保持打开状态。我使用托管的bootstrap.min.js和bootstrap.min.css文件作为资源。这是bootstrap-cliumse.js实现中的已知bug，还是我忽略了标记中的错误？
浏览 0提问于2012-09-10得票数 0
回答已采纳
我这里有一个JSFiddle：
我的“添加”按钮不完全与文本区域对齐：
但这两种方法的前面都有一个带有类col-2的元素，所以我不知道为什么对齐会稍微偏离。
如何使'Add‘按钮与文本区域准确地对齐？
浏览 0提问于2019-04-04得票数 0
回答已采纳
如果我有一个表单，在纯HTML格式的输入旁边有一个标签，并且这两个表单都是内联的(或内联的块)，那么它们就会按照基线对齐。但是当使用bootstrap并将输入放在输入组中时，它们似乎被底部对齐了。
我试着在没有bootstrap的情况下复制它，但我做不到，它就是工作。我创建了fiddle来显示问题：
HTML是：
<p>A case working, with just an input:</p>
<div class="form-group without-input-group">
<label>label</
浏览 2提问于2014-04-29得票数 3
1回答
在Bootstrap 4中，如何创建垂直堆叠的按钮列表，其中每个按钮包含两列左对齐的文本？
浏览 7提问于2020-06-06得票数 0
1回答
我有以下html。我使用的是Bootstrap 3框架。我试图垂直对齐我的按钮与h2标题在行。问题是按钮与列div的顶部对齐，而不是像标题那样在中间对齐。另外，当屏幕变小时，按钮就会与底部对齐。我和小提琴有联系。
<div class ="row">
<div class="col-sm-9">
<h2>Dashboard</h2>
</div>
<div class="col-sm-3" >
<
浏览 0提问于2015-12-09得票数 2
回答已采纳
我想让我的bootstrap touchSpin的元素很好地对齐，就像演示()一样。
正如您在下面的示例中所看到的，这两个按钮与文本框垂直对齐。
在我的例子中，减号按钮、加号按钮和文本框没有很好地对齐。
为了明确地说明我的问题，我在上上传了一个演示
你知道我该怎么解决这个问题吗？
我希望我的问题可以理解。
非常感谢你的帮助。
浏览 12提问于2016-08-25得票数 0
Twitter Bootstrap在页面两侧放置了对齐的导航按钮。
<ul class="pager">
<li class="previous">
<a href="#">Previous</a>
</li>
<li class="next">
<a href="#">Next</a>
</li>
</ul>
我有一个位于这些导航链接上方的<h3>标题
浏览 0提问于2013-04-17得票数 5
回答已采纳
首先我创建了一个名为Bootstrap.cs的类文件，然后创建了另一个类名Bootstrap.Designer.cs，最棒的部分是Bootstrap.Designer.cs在头等舱下。
所以我决定创建另一个名为Bootstrap.Sample.cs的类
但这里的问题是，第三档不属于头等舱。
是否存在像*.Designer.cs这样的类命名列表，允许在第一类下命名？
浏览 0提问于2014-11-18得票数 4
回答已采纳
我正在使用Twitter Bootstrap来创建按钮下拉菜单，但内部菜单按钮似乎不会恰好在它下面对齐。下拉菜单位于页面的中心，菜单显示在页面的最左侧。
我曾尝试使用LEFT、Padding.Left-LEFT属性，但没有成功。
代码：
<span class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Export
<span class="caret"
浏览 0提问于2013-04-26得票数 0
回答已采纳
我正在尝试使用react bootstrap表中的筛选器，筛选器显示但它们未对齐
这是我使用的代码：
<BootstrapTable key={this.props.index}>
<TableHeaderColumn columnTitle row='0' filter={filterBy} rowSpan='2' dataField='product' headerText='SSS' isKey>id</TableHeaderCo
浏览 0提问于2019-01-31得票数 0
我想用无线input字段()来样式化原始Bootstrap的btn-group-justified。
原始样式如下所示：
但我希望每个按钮都是方形的，并在它们之间留出一些空格。如下所示：
我正在尝试使用Bootstrap示例中的一些修改过的html标记
[data-toggle="buttons"] .btn>input[type="radio"] {
display: none;
}
.category-select .btn-container {
position: relative;
width: 19%;
pad
浏览 0提问于2013-10-02得票数 15
回答已采纳
我正在尝试对齐标题部分中定义的标题和按钮，这些标题和按钮都是在主体部分中定义的，它们对齐了网页的中心。是否有任何简单的方法将按钮和标题放在一起，垂直对齐在Flask应用程序中的网页中心？
如何在Bootstrap4 ??中将页眉和按钮对齐到页面的中心
{% extends 'base.html' %}
{% block head %}
<h1 align="center"> Please Select A Option </h1>
{% endblock %}
{% block body %}
<form
浏览 3提问于2019-11-20得票数 3
8回答
尝试在td中居中对齐按钮
、、、、
我在td中找不到按钮的中心。
这可能是一个简单的CSS问题，但应用程序使用的是bootstrap、AngularJS、AngularJS-ui-bootstrap和ngTable。我已经在我的中包含了所有这些组件。
我试着用按钮在td上设置“水平对齐:居中”，但似乎没有应用。该按钮仍然向单元格的左侧倾斜。
浏览 99提问于2014-03-14得票数 39
回答已采纳
1回答
使用Bootstrap3，单选按钮文本的堆叠在移动(Xs)视图- 中是不正确的。
屏幕截图：
可以看到，文本与移动(Xs)视图中的单选按钮没有正确对齐。
浏览 5提问于2013-12-19得票数 1
回答已采纳
4回答
我正在尝试解决如何正确地将文本与单选按钮对齐。我在一个单选按钮组中垂直布局了许多单选按钮，每个单选按钮都有一个TextView，它们应该与单选按钮对齐。我发现的问题是，因为单选按钮在它们自己的RadioGroup布局中，所以我不能引用RadioButton，所以它与TextView对齐。有谁知道做这件事的好方法吗？
浏览 0提问于2010-11-19得票数 0
回答已采纳
我正在空闲时间创建一个WYSIWYG编辑器。我决定使用下拉菜单来允许自己选择格式。问题是，当我添加一个下拉列表时，它不是在按钮下面，而是在按钮容器的开头。
这里有一张图片来说明我的意思。
第一个按钮看起来是活动的，因为文本左对齐...对不起，我试图找到一个解决的方法，但下拉菜单是从最后一个按钮。
我的问题是，有没有一种方法可以将Twitter Bootstrap下拉菜单与它应该打开的按钮对齐，或者至少使下拉菜单与按钮容器的宽度对齐。
浏览 6提问于2013-02-13得票数 0
5回答
我如何使谷歌材料图标正确地对齐在我的启动按钮？
例如，考虑以下代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://m
浏览 3提问于2016-11-23得票数 8
回答已采纳
您可以在我的演示中看到按钮没有正确地对齐：
是否可以：
1)在输入字段和按钮之间有一个空格&
( 2)按钮是否垂直对齐？
演示：
代码：
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link hre
浏览 5提问于2016-07-11得票数 0
回答已采纳
我有一组单选按钮和一个提交按钮。我希望将它们并排放置，单选按钮组在左侧，提交按钮按比例在右侧对齐。使用twitter bootstrap的正确方式是什么？
目前，无论我做什么，我都会获得单选按钮组下面的按钮。
浏览 3提问于2015-01-28得票数 0
我正在使用Bootstrap Card，在页脚，我有两个按钮。我需要做的是在绝对中心对齐一个按钮，并在页脚的左侧对齐另一个较小的按钮。两个按钮都应该垂直居中对齐。 下面是我的代码： <div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">
浏览 40提问于2019-07-01得票数 0
回答已采纳
1回答
我可以用手垂直对齐在启动按钮内的文本。
如果我使用这个类，文本就像我想要的那样垂直对齐，但是如果我使用这个类，文本是顶对齐的，而且我做的任何事情似乎都不会改变它。有什么想法吗？
按钮截图：
/* added by editor for demo purpose */
button {
min-height: 80vh;
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bo
浏览 3提问于2022-05-21得票数 0
1回答
我试图做以下工作：
.bootstrap-scope {
@import "bootstrap.min.css";
}
我知道bootstrap.min.css在合适的位置，因为把@import "bootstrap.min.css";放在css页面的顶部很好。
无论如何，重点是能够发现什么是受引导的影响。我希望引导只适用于随附的div
<div class="bootstrap-scope">
...
</div>
有什么想法吗？这看起来应该很简单。
建议将导入放在类中。还有别的选择吗？
浏览 2提问于2015-03-21得票数 2
回答已采纳
2回答
我试图对齐这4个元素，但它们没有正确对齐。我使用的是bootstrap。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http
浏览 3提问于2017-09-26得票数 0
1回答
我正尝试在嵌套列表的工具栏上添加一个按钮(右对齐)。下面是我的代码：
Ext.define('Test.view.NestedList', {
extend: 'Ext.Panel',
requires: ['Ext.dataview.NestedList'],
xtype: 'mynestedlist',
config: {
modal: true,
centered: true,
layout:'fit',
width:'80%',
height:&
浏览 0提问于2013-06-07得票数 0
2回答
我是Bootstrap的新手，我想我应该使用他们的v4 alpha版本。
我正在尝试将下面示例中的“安排估值”按钮(靠近页面底部)靠右对齐，而其他文本则靠左对齐。我还需要文本和按钮垂直对齐在中间。
你能帮上忙吗？
<div class="card card-block card-blue clearfix">
<p class="card-text">Want to know how much rent you could achieve for your property? <a href="#
浏览 1提问于2015-11-09得票数 7
我希望标签在它的输入框旁边右对齐(中间有一个空格)。但是，标签仍然左对齐。根据Boostrap3文档和此，应该使用form-horizontal类，但结果仍然不正确。
下面的django模板代码以两列的方式生成字段，但标签左对齐：
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-3 col-md-offset-1 input-md">
浏览 1提问于2013-09-24得票数 0
回答已采纳
1回答
我在这个div对齐和定位上遇到了问题。我使用bootstrap 3，其中col-md-12是我的父div，col-md-9和col-md-3是我的子div。这是我的设计的一个样本图像，我正面临着问题。
我们能让它有响应性吗？
到目前为止，我的代码如下： (请展开视图区域查看问题)
提前谢谢你。
浏览 11提问于2016-09-08得票数 0
我想把标题和按钮放在同一条水平线上，但放在页面的相对两侧(左和右)。我使用的是Twitter引导程序，所以我将它们放在一个.row中，然后指定它们都是.col.sm-6。我把按钮放在div中，这样我就可以用文本对齐将它移到列的右边。
我怎么能让那个按钮在手机上自动中心呢？当窗口变小，第二列跳到第一列下时，按钮仍然对齐。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class=&
浏览 1提问于2014-11-04得票数 0
回答已采纳
1回答
我需要使一个链接到另一个页面在流星使用流星包。我正试着用一个按钮把它添加到标题的右边。如果我在{{#contentFor "headerButtonRight"}}中创建一个按钮-它会按预期对齐。但是如果我添加了一个标记对齐就不再适用了。我尝试将元素放入"headerTitle“并添加类"pull-right”，但结果是相同的。目前，我的代码如下所示：
{{#contentFor "headerButtonRight"}}
<a href="{{pathFor 'drafts.add'}}" clas
浏览 6提问于2015-03-26得票数 0
2回答
我在bootstrap中使用以下输入组：
<div class="input-group" style="padding-left: 20px;">
<input type="text" name="s" class="form-control input-sm">
<span class="input-group-btn">
<button class="btn btn-default input-sm" t
浏览 0提问于2015-10-27得票数 1
1回答
引导文本-基于按钮大小的对齐方式
、、、、
我目前正在尝试浏览文档，似乎走进了某个死胡同。我很好奇是否有一种方法可以在按钮等的大小级别构建文本对齐，而无需将按钮拖入单独的div中。
例如，如果md和lg的文本对齐方式为右对齐和左对齐，则按钮将与其余文本并排并居中。但为了让它卡到合适的位置，我能找到的唯一变通办法就是为平板电脑sm和phone创建一组额外的隐藏按钮。
因此，我目前的工作是这样的，但如果可能的话，我想让它保持在一组按钮上。有什么想法？
<div class="row">
<div class="clearfix visible-xs visible-sm text-cente
浏览 0提问于2014-06-19得票数 0
1回答
我正在使用Bootstrap为我的个人网站一个简单的登陆页面。我有一排接触按钮沿底部，我是对齐的列。我在桌面上的设置非常好，但是在移动(我使用的是iPhone 5)上，按钮被移到了右边。我尝试过不同的断点大小和列的偏移量，但我似乎无法让它们在桌面和移动设备上正确地对齐。
浏览 4提问于2015-04-06得票数 1
回答已采纳
2回答
我是一个HTML/CSS的新手，我正在创建一个网页，上面有一个响应性导航栏。我面临的问题是，当navbar被折叠并按下按钮时，navbar-items在打开的导航菜单的左侧对齐。我希望这些项目与菜单上的中心对齐。我在和上搜索了很多，但是我无法找到解决问题的方法。
下面是我正在使用的HTML代码：
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
浏览 4提问于2016-08-07得票数 3
回答已采纳
我使用约曼角度生成器创建了一个带有Bootstrap的AngularJS应用。
当我在局部视图中使用超过一定数量的Bootstrap行时，HTML正文宽度突然变小，并抛出对齐。
我已经能够通过从头开始生成一个应用程序来重现这个问题，如下所示：
mkdir mytodo && cd $_
yo angular
? Would you like to use Gulp (experimental) instead of Grunt? No
? Would you like to use Sass (with Compass)? No
? Would you like to incl
浏览 14提问于2016-08-28得票数 0
我正在尝试将Bootstrap 4列中的元素垂直对齐到它的顶部和底部。我知道这个问题已经有了很多答案，但在我的情况下似乎没有一个是有效的。这是我的代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row">
<div class="col-md-7">
<h1>Product N
浏览 11提问于2019-11-16得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
