css - bootstrap 4 中的合理嵌套按钮组-6ren

css - bootstrap 4 中的合理嵌套按钮组

转载作者：行者123 更新时间：2023-11-28 15:06:40

26

4

我有一个像这样的按钮组控件。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div role="group" class="d-flex btn-group">
       <button type="button" class="w-100 btn btn-outline-secondary"><i class="fas fa-print"></i></button>
       <div role="group" class="dropdown btn-group">
          <button aria-haspopup="true" aria-expanded="false" type="button" class="dropdown-toggle btn btn-outline-secondary"><i class="fas fa-download"></i></button>
          <div aria-labelledby="" class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 32px, 0px);"><a class="w-100 dropdown-item" role="button" href="#">Dropdown link</a><a class="w-100 dropdown-item" role="button" href="#">Dropdown link</a></div>
       </div>
       <button type="button" class="w-100 btn btn-outline-secondary"><i class="fas fa-th"></i></button><button title="Clear" type="button" class="w-100 btn btn-outline-secondary"><i class="fas fa-eraser"></i></button>
    </div>

嵌套按钮组没有像其他按钮那样占用可用宽度。

我也试过给 w-100 但没有帮助。

最佳答案

请检查下面的代码，它可能对你有帮助

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<style>
	.btn-group .col-6-cus { width:50% !important;}
	.btn-group .col-6-cus .dropdown-toggle { width:100%;}
</style>

</head>

<body>


    <div role="group" class="d-flex btn-group">
       <button type="button" class="w-100 col-6-cus btn btn-outline-secondary"><i class="fas fa-print"></i></button>
       <div role="group" class="dropdown btn-group col-6-cus">
          <button aria-haspopup="true" aria-expanded="false" type="button" class="dropdown-toggle btn btn-outline-secondary"><i class="fas fa-download"></i></button>
          <div aria-labelledby="" class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 32px, 0px);"><a class="w-100 dropdown-item" role="button" href="#">Dropdown link</a><a class="w-100 dropdown-item" role="button" href="#">Dropdown link</a></div>
       </div>
       <button type="button" class="w-100 btn btn-outline-secondary col-6-cus"><i class="fas fa-th"></i></button>
       <button title="Clear" type="button" class="w-100 btn btn-outline-secondary col-6-cus"><i class="fas fa-eraser"></i></button>
    </div>

</body>
</html>

关于css - bootstrap 4 中的合理嵌套按钮组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56168778/

26

4

0

文章推荐： html - 背景图片在移动设备上没有响应

文章推荐： css - 为什么我的媒体查询没有改变任何东西？

文章推荐： swift - 以编程方式隐藏和关闭当前 NSViewController 的窗口

c# - 用户控件实例数的(合理)上限
我有一个曾经是 TreeView 控件的菜单，但现在我想让每个项目更加直观，并向树中的每个对象添加更多信息。我的第一个意图是制作一个代表项目的用户控件，并在运行时将它们添加到面板中。这是一个好方法吗
docker - 在 Docker 容器内进行开发是否可能/合理
我是 Docker 新手，想知道是否有可能(并且是一个好主意)在 Docker 容器中进行开发。我的意思是创建一个容器，执行 bash，安装和配置我需要的一切，然后开始在容器内进行开发。容器将成为我
java - Parent obj = new Child();合理？
在 Java 中: Parent obj = new Child(); 我创建了一个 Parent 类型的对象。我假设我只能调用父类中定义的方法。因此，我无法调用 Child 中定义的“附加”方法或访
c - 使用 Arduino Uno 生成正弦波的代码是否有效/合理？
注意:我省略了其他两个阶段(V 和 W)的代码，示例中不需要。我很确定，我这样处理“开”和“关”时间的方式并不是一种有效的方式。我想使用查找表实现“开”和“关”脉动。计时器应与表的当前选定值进行比
java - 合理 `instanceof` ？将其与接口(interface)一起使用，但不与实现类型一起使用
当代码中包含 Java instanceof 运算符时，许多人会扬起眉毛并说这是禁忌。例如，在这个 other SO Q&A ，答案说: Note that if you have to use th

首页

博学

6Ren·AI

商城

css - bootstrap 4 中的合理嵌套按钮组