Bootstrap输入按钮组插件，隐藏第二个按钮后显示第一个按钮的圆角
Bootstrap 的输入按钮组插件（Button Group）允许你将多个按钮组合成一个单一的元素。默认情况下，按钮组中的按钮会共享边框和圆角，以创建一个统一的外观。如果你隐藏了第二个按钮并希望显示第一个按钮的圆角，可以通过自定义 CSS 来实现。
基础概念
- Bootstrap Button Group: 这是一个用于将多个按钮组合在一起的组件，通常用于导航或表单操作。
- CSS 圆角: 使用
border-radius属性可以设置元素的圆角。
相关优势
- 统一外观: 按钮组提供了一种简单的方式来创建一组视觉上一致的按钮。
- 易于实现: 使用 Bootstrap 的类可以快速构建按钮组。
- 响应式设计: Bootstrap 的按钮组可以很好地适应不同的屏幕尺寸。
类型
- 基本按钮组: 使用
.btn-group类。 - 垂直按钮组: 使用
.btn-group-vertical类。 - 嵌套按钮组: 可以在按钮组内再嵌套一个按钮组。
应用场景
- 导航菜单: 如标签页或下拉菜单。
- 表单操作: 如提交、重置等按钮组合。
- 工具栏: 集成多个功能按钮。
遇到的问题及解决方法
如果你隐藏了第二个按钮并希望第一个按钮显示完整的圆角，可以通过以下步骤解决：
- HTML 结构:
- HTML 结构:
- CSS 样式: 使用自定义 CSS 来调整第一个按钮的圆角，使其看起来像是独立的按钮。
- CSS 样式: 使用自定义 CSS 来调整第一个按钮的圆角，使其看起来像是独立的按钮。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Group Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.btn-group > .btn:first-child:not(.d-none) {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
.btn-group > .btn:last-child.d-none + .btn {
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="btn-group">
<button type="button" class="btn btn-primary">Button 1</button>
<button type="button" class="btn btn-secondary d-none">Button 2</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>解释
- HTML: 使用
.d-none类隐藏第二个按钮。 - CSS: 自定义样式确保第一个按钮在第二个按钮隐藏时显示完整的圆角。
通过这种方式，你可以灵活地控制按钮组的视觉效果，使其适应不同的设计需求。
相关·内容
从下图中
使用javascript，我需要让第一个按钮有圆角。在我使用javascript隐藏第二个按钮后，第一个按钮在右侧有一个矩形形状：如果我删除了按钮节点，bootstrap会设置圆角，但这没有什么用处。这就是我所需要的，通过使用javascript：标准
浏览 0提问于2013-05-21得票数 4
回答已采纳
我有一个在运行时隐藏第二个按钮的按钮组。 但第一个按钮现在是90°边框。如何修改下面的示例以使按钮1显示为圆形边框。如果我隐藏“按钮2”， $("#btn1").click(function() {});
$("#btn2").click(function() {/
浏览 42提问于2019-01-24得票数 0
有时我们想隐藏/显示Twitter-bootstrap按钮组中的按钮。<button id="two" class="btn">two</button></div>
当我们隐藏<
浏览 1提问于2013-04-26得票数 15
一旦他们按下register，提交两组帖子信息。<input type="submit" name="secondSubmit" value="Register" /></section><script ty
浏览 0提问于2013-03-07得票数 0
回答已采纳
我使用的是Zurb Foundation 5，我想使用带圆角按钮的按钮堆栈。然而，一些我想隐藏的按钮。例如，我的代码本质上是 <li><a href="#" class="button tiny">Button 1</a></li>
浏览 2提问于2015-09-14得票数 2
2回答
考虑下面的html代码，它使用引导3输入组来创建一个输入三个输入组。</span> </div>默认的引导样式为所有输入组放置边框半径，这对中间输入组(我指的是*周围的极小的左半径)并不好。要删除此半径，我尝试将所有输入</e
浏览 6提问于2015-08-18得票数 0
回答已采纳
2回答
我有一个按钮组，有时我需要根据用户交互隐藏最后一个右边的按钮。如果我隐藏右边的按钮，中间的按钮将失去圆角设计。我希望中间的按钮也有圆角时，右按钮是隐藏的。在下面的例子中，当用户隐藏右按钮时，Middle将失去它的圆角。bt
浏览 33提问于2019-01-20得票数 1
回答已采纳
希望这是一个简单的例子。目前，该功能运行良好，但按钮停留在相同的位置。一旦打开，“View Less”按钮就会落在内容正文的下方。article.html.erb (隐藏内容)
<% article_id = "article-id-#{article.id}&qu
浏览 17提问于2017-03-04得票数 0
我有一个单选按钮组，包含两个不同的按钮，如果选择第二个按钮，我想在同一页上显示一些附加字段，同时选择第一个按钮，我想隐藏它们。用户输入，变量名称: test.radio是否有可能将单选按钮绑定到哪个单选按钮并对某些文本字段执行“隐藏和显示”操作？
浏览 5提问于2016-05-26得票数 1
回答已采纳
我正在用Ruby2.4.0和Bootstrap 4 Alpha 6构建一个rails 5应用程序。<%= link_to "Confirm your Device", "#", class =&
浏览 2提问于2017-05-08得票数 0
回答已采纳
4回答
我有两个按钮添加和分组。最初，组按钮是隐藏的。“添加”按钮用于创建记录。我正在使用bootstrap css，并且为了隐藏我所做的
<input type="button"
浏览 3提问于2013-10-30得票数 0
回答已采纳
1回答
我目前正在寻找在一个按钮组的最后一个和第一个按钮上放置圆角。目前，我们已经将组中的第一个和最后一个按钮四舍五入，但我们希望每一行都是这样的。这是用于它的当前CSS (来自bootstrap的标准button-groups.less )：
.btn-group > .btn:first-child:not(:last-child):not(.active:is
浏览 1提问于2017-12-11得票数 0
“删除我的帐户”按钮应该从第二个按钮中删除隐藏类，从而在单击后显示第二个按钮。它做得很好，但是Firefox在设置隐藏属性的情况下也会显示按钮。单击之后，它会更新第二个按钮并删除属性，但是显示保持不变，因为Firefox仍然希望以任何方式显示该按钮。我只需要在点击第一
浏览 2提问于2015-10-07得票数 0
回答已采纳
我正在使用jquery验证插件来验证表单输入。我遇到的问题是，我有一个单选按钮组，它根据所选的单选按钮隐藏和显示不同的字段。谢谢
浏览 0提问于2012-02-23得票数 0
回答已采纳
我编写了两个jquery插件:第一个转换文本或隐藏输入，其中包含日期，该输入包含三个具有日/月/年选项的下拉菜单。第二个插件允许我从一组输入字段开始生成一组行，并自动添加一个"Add row“按钮和一个"delete row”按钮。此外，我还向“多行插件”添加了一个addRow()函数，它允许我以编程方式添
浏览 0提问于2013-06-30得票数 1
回答已采纳
1回答
在引导3中，我有一个按钮组。如果按钮组中的第一项具有隐藏类，则第一个可见元素将失去其圆角边框半径。我如何修改下面的CSS，以便如果第一个元素有一个隐藏类，那么第一个可见元素仍然应该在左边有圆角？ border-radius: 0;<link href="https:/&#x
浏览 3提问于2016-06-22得票数 3
我的tinyMCE编辑器上有两个工具栏(两行)，我想在第一个工具栏上添加一个按钮，用于显示/隐藏第二个工具栏。它也可以是一个静态按钮，表示类似于<e
浏览 4提问于2016-06-07得票数 1
1回答
我有两个表连接到不同的sqldatasources，但我希望在单击某个按钮时只显示其中的一个。
我尝试使用Jquery插件隐藏这些表，但这会隐藏两个表。我希望第一个表被隐藏，第二个表在单击按钮时显示。
浏览 16提问于2019-07-27得票数 1
回答已采纳
3回答
我需要在用户单击按钮后显示软件键盘。现在我隐藏了键盘，并在用户单击按钮后显示它，但当用户单击Edit-text时，键盘就会显示出来。我有两个按钮，当用户点击第一个按钮时，他看到的是软件键盘，当他点击第二个按钮时，软件键盘是隐藏的，他看到的是控制编辑文本的控件片段。并且当用户看
浏览 3提问于2014-03-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
