Выровненная группа вложенных кнопок в bootstrap 4 - PullRequest
Новая
       39

Выровненная группа вложенных кнопок в bootstrap 4

0 голосов
/ 16 мая 2019

У меня есть такой групповой элемент управления Button. 

<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, но без помощи.

Ответы [ 2 ]

0 голосов
/ 17 мая 2019

Пожалуйста, проверьте ниже код, это может помочь вам 

<!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>
0 голосов
/ 16 мая 2019 

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