Question

我有一个这样的Button组控件。

 map.put(new PdfName("test"), new PdfString("test"));

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

我也尝试过给<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>，但没有帮助。

Answer 1

请检查以下代码，它可能会对您有所帮助

<!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>

Answer 2

<!DOCTYPE html>

<html>
<head>
<style></style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

</head>

<body>

      <div class="btn-group w-100" role="group" aria-label="Button group with nested dropdown">
	  <button type="button" class="btn btn-outline-secondary w-25"><i class="fas fa-print"></i></button>
	  

	  <div class="btn-group w-25" role="group">
	    <button id="btnGroupDrop1" type="button" class="btn btn-outline-secondary dropdown-toggle w-100" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	      <i class="fas fa-download"></i>
	    </button>
	    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
	      <a class="dropdown-item" href="#">Dropdown link</a>
	      <a class="dropdown-item" href="#">Dropdown link</a>
	    </div>
	  </div>
	  <button type="button" class="btn btn-outline-secondary w-25"><i class="fas fa-th"></i></button>
	  <button type="button" class="btn btn-outline-secondary w-25"><i class="fas fa-eraser"></i></button>
	</div>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script>window.jQuery || document.write('<script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js"></script>
    <script src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js"></script>
    <script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/holder.min.js"></script>
    </body>
</html>

引导程序4中的对齐嵌套按钮组

2 个答案: