Geek asks and answers

Text is not correctly aligned using bootstrap navbar-text pull-right

I have the following code in an html file:

 <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
              <div class="container-fluid">
                  <a href="index.html" class="brand">Hello Bootstrap</a>
                  <p class="navbar-text pull-right">This is first notice.</p><br/>
                  <p class="navbar-text pull-right">This is second notice. </p>
              </div>
          </div>
  </div>

I get the output as follows:

enter image description here

Please note that “This second notification” is not correctly aligned with the line above it. I am trying to get two notifications aligned correctly with each other.

I also tried removing <br/>from the above code, but with this I get the following output: enter image description here

Can someone tell me what I am doing wrong?

JSFiddle: http://jsfiddle.net/N6vGZ/23/

+5
source share
3 answers

, , , line-height of 40px, , . , line-height, - 20px .

. , , .

HTML

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a href="index.html" class="brand">Hello Bootstrap</a>
            <div class="notices pull-right">
                <p class="navbar-text">This is first notice.</p>
                <p class="navbar-text">This is second notice.</p>
            </div>
        </div>
    </div>
</div>

:

CSS

.notices p {
    line-height:20px !important;
}

: http://jsfiddle.net/N6vGZ/29/

+9

css, , "float: right" "pull-right".

, - p div , :

<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
          <div class="container-fluid">
              <a href="index.html" class="brand">Hello Bootstrap</a>
              <div class="pull-right">
                   <p class="navbar-text">This is first notice.</p>
                   <p class="navbar-text">This is second notice. </p>
              </div>
          </div>
      </div>

"pull-right" css, .

+3

ul nav li pull-right

http://jsfiddle.net/N6vGZ/28/

0
source

More articles:


All Articles