All geek questions in one place

Bootstrap Correction Group

Twitter bootstrap 3 has a component-prepared name for the button group, justified . URL: http://getbootstrap.com/components/#btn-groups-justified

Is there a way to make .btn-group.btn-group-justified responsive if we have more buttons? Maybe we can put it on 2 lines without using display: block and save it display: table-cell so that it can remain vertically aligned in the middle?

enter image description here

Are there any built-in classes prepared by bootstrap? since they prepared this component of the Button Just Just css group, don't they have anything to make it responsive if it has many buttons with longer words?

Here is my fiddle: http://jsfiddle.net/kHW3V/

+6
source share
3 answers

well yes, if you used regular button groups like this, its already responsive

 <div class="btn-group"> <button type="button" class="btn btn-default">Text</button> </div>

Updated Fiddle

if you have reasonable let me know!

+2
source

Using https://getbootstrap.com/components/#nav-justified worked for me

 <ul class="nav nav-pills nav-justified"> <li><a role="button" class="btn btn-default" href="/mypage1"><img src="/images/myimage1.png" height="32" alt="myimage1"></a></li> <li><a role="button" class="btn btn-default" href="/mypage2"><img src="/images/myimage2.png" height="32" alt="myimage2"></a></li> <li><a role="button" class="btn btn-default" href="/mypage3"><img src="/images/myimage3.png" height="32" alt="myimage3"></a></li> </ul>
0
source

You can add this style to all .btn inside .btn-group-justified .

 .btn-group-justified > .btn { width: auto; display: inline-block; }
0
source

Source: https://habr.com/ru/post/970562/

More articles:


All Articles