问题描述:

I have some jQuery mobile pages with header containing text and/or buttons. Sometimes there are centered text, others just crowded with buttons. There are several of screen sizes and/or number of buttons.

How do I duplicate this in Bootstrap collapsed navbar-header? I created this jsfiddle sample, but couldn't figure out how to center/justify text and buttons.

Jsfiddle Sample

<div class="navbar-header">

<!-- button left -->

<a type="button" class="navbar-toggle collapsed pull-left navbar-icon" data-toggle="collapse" data-target="#navbar">

<i class="fa fa-bars fa-2x"></i>

</a>

<!-- button right --->

<a class="navbar-toggle collapsed navbar-icon" data-toggle="collapse">

<i class="fa fa-edit fa-2x"></i>

</a>

<!-- in the middle -->

<div style="text-align:center">

<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">

<i class="fa fa-reply fa-2x"></i>

</a>

<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">

<i class="fa fa-foward fa-2x"></i>

</a>

<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">

Some Text

</a>

</div>

</div>

<style>

body {

padding-top: 60px;

}

.navbar-header .navbar-icon {

line-height:30px;

height:30px;

border:0;

}

.navbar-header a.navbar-icon {

padding:0 0px;

}

</style>

The closest answer I can find is previous discussion. Tried the answers there, didn't work.

Any hint what I miss? Thanks

Update: Final version based on suggestions. Probably something to do with customized bootstrap, my local version looks a lot better than on jsfiddle.

网友答案:

The reason you are not able to center your icons is because they have a css property that is making them float right;

add a class to the icons for example 'no-float' then add this to your css
.no-float { float:none!important; }

that will make it work

So this
<a class="navbar-toggle collapsed navbar-icon" data-toggle="collaplse">
becomes this
<a class="no-float navbar-toggle collapsed navbar-icon" data-toggle="collaplse">

网友答案:

You mean like this?

http://jsfiddle.net/aoyss2Lm/6/

I added the bootstrap class "text-only" inline to the <li>

相关阅读:
Top