Bootstrap split button dropdown size not the same
(Sorry, I'm not good at English)
I want to make a button the same size. But it was not the same size.
How can I make my size the same?
<div class="filter pull-right" style="padding:8px">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
`
+3
source to share
2 answers
Try the following:
Use the btn-group
class
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
</ul>
</div>
+1
source to share
The problem is not really related to the button code or missing space.
The HTML tag is missing at the beginning of the document.
Here you see a button on the left without additional
and with an additional one
on the right. The button on the right is somewhat asymmetrical.
Following the Boostrap documentation , adding this code to your doc:
<!DOCTYPE html>
<html lang="en">
...
</html>
As a result, you will have a button:
+3
source to share