html - 使用 twitter bootstrap 制作一个通知计数器

Question

我目前拥有的是:http://jsfiddle.net/prongs/TcbSZ/3/ .

HTML:

<div id="top_navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner" style="
">
<div class="container" style="
">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/">Testimonial</a>
<div class="nav-collapse collapse">
<ul class="nav" style="
">
<li class="span6 offset1">
<form class="navbar-form form-search">
<div class="input-append">
<input class="span4 search-query" type="text" placeholder="Search...">
<button type="submit" class="btn">Search</button>
</div>
</form>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Notifications <span class="notif-surround"><span class="badge notif-background badge-important" id="notif_background">&nbsp;</span><span id="num_notif" style="bottom: 0px;">0<br>1<br>2<br>3<br></span></span><b class="caret"></b></a>
<ul class="dropdown-menu" id="notif_list_node">
<li class="nav-header">Notifications</li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li>
<!-- <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 class="nav-header">Messages</li> -->
<!-- <li><a href="#">Separated link</a></li> -->
<!-- <li><a href="#">One more separated link</a></li> -->
</ul>
</li>
<!-- <li><i class="icon-exclamation-sign icon-white"></i></li> -->
<li class="dropdown">
<img class="img-rounded img-profile inline" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/371739_100000191247312_1824268558_q.jpg">
<a href="#" class="dropdown-toggle profile-name" data-toggle="dropdown">Rajat Khandelwal <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/auth/logout">Logout</a></li>
<!-- <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li> -->
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>

CSS:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.img-profile{
        width:30px;
        height:30px;
      }
      .profile-name{
        display: inline-block !important;
        padding-left: 1px !important;
      }
      .friend_row{
        cursor:pointer;
      }
body
{
    padding-top: 60px;
    padding-bottom: 40px;
}
.HelpPluginIcon{
    background-image: url(../images/help_icon.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 18px;
    height: 18px;
}
.notif-background{
    width:18px;
    height:14px;
}
#num_notif{
    position: relative;
    float: right;
    left: -24px;
    color: #fff;
    height:18px;
    bottom: 0;
}
.notif-surround{
    overflow:hidden;
    display:inline-block;
}
ul#notif_list_node{
    width: 350px;
}
ul#notif_list_node li table{
    width:100%;
    cursor:pointer;
}
ul#notif_list_node li table tr td{
    text-align: left;
}
ul#notif_list_node li table tr td strong{
    font-weight: bold;
}




.page {
    font-family: 'Just Another Hand', cursive;
    width: 700px;
    position: relative;
    margin: auto;
    padding: 15px;
    color: #212121;

    -webkit-border-bottom-left-radius: 20px 500px;
    -webkit-border-bottom-right-radius: 500px 30px;
    -webkit-border-top-right-radius: 5px 100px;

    -moz-border-radius-bottomleft: 20px 500px;
    -moz-border-radius-bottomright: 500px 30px;
    -moz-border-radius-topright: 5px 100px;

    border-radius-bottomleft: 20px 500px;
    border-radius-bottomright: 500px 30px;
    border-radius-topright: 5px 100px;

    background: #fcf59b;
    background:
        -webkit-gradient(
            linear,
            left top, left bottom,
            from(#81cbbc),
            color-stop(2%, #fcf59b)
        );

    background:
        -moz-repeating-linear-gradient(
            top,
            #fcf59b,
            #fcf59b 38px,
            #81cbbc 40px
        );

    background:
        repeating-linear-gradient(
            top,
            #fcf59b,
            #fcf59b 38px,
            #81cbbc 40px
        );

    -webkit-background-size: 100% 40px;

    -webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
    -moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);

}

.page:before {
    content: ' ';
    background: url(tape.png) no-repeat;
    width: 129px;
    height: 38px;
    position: absolute;
    top: -15px;
    left: 40%;
    display: block;
}

.page p {
    padding: 0 100px;
    line-height: 40px;
    margin-bottom: 40px;
    font-size: 30px;
}

正如您在输出中看到的那样，问题在于元素的水平对齐方式。如何使它们对齐？

Answer 1

http://jsfiddle.net/jsu86/我移动了你的位置

<a class="brand" href="/">Testimonial</a>

如果你仍然想要 margin 然后添加

并删除左边的偏移量

<li class="span6 offset1">
<form class="navbar-form form-search">
<div class="input-append collapce-left">
<a class="brand" href="/">Testimonial</a>
<input class="span4 search-query" type="text" placeholder="Search...">
<button type="submit" class="btn">Search</button>
</div>