Bootstrap 4.1 Vertical Navs how to mr-auto/ml-auto badge

Is navs not navbar

navs

navbar

https://getbootstrap.com/docs/4.1/components/navs/#vertical

enter image description here

<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#"> Link A 140 </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> Link B 300 </a> </li> </ul>

tired change

but didn't work

Edited: see @Temani Afif answer below

if with d-flex only

d-flex

enter image description here

with d-flex align-items-center solved the problem

d-flex align-items-center

enter image description here

have you tried mr-auto?

– Chunbin Li
Sep 18 '18 at 0:03

mr-auto

yes ml-auto and mr-auto both not work

– kenken9999
Sep 18 '18 at 0:03

1 Answer
1

You need to make the a element a flex container to be able to use ml-auto/mr-auto. Simply add d-flex to a:

a

ml-auto

mr-auto

d-flex

a

I also added align-items-center to center but it's not mandatory:

align-items-center

.nav background:pink;

thankyou so much, must add d-flex align-items-center to get this work, if only d-flex, the badge look something wrong

– kenken9999
Sep 18 '18 at 0:13

d-flex align-items-center

@kenken9999 it look stretched not wrong ;) because the default alignment is stretch

– Temani Afif
Sep 18 '18 at 0:21

anyways thankyou so much ;)

– kenken9999
Sep 18 '18 at 0:23

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

搜尋此網誌

Dfyjkt