Twitter的引导 - 在导航栏

中心品牌标志我tryed与定心.brand标志：Twitter的引导 - 在导航栏

.brand { margin-left: auto; margin-right: auto; }

这是我的顶部导航栏中的布局：

http://jsfiddle.net/J4zkJ/3/

但似乎它不工作。

我在堆栈上搜索之前发布此答案和我上面使用的代码，是从一个回答的问题。

任何想法如何集中.brand？

NB：我不能使用position:absolute and fixed，我想响应做到这一点（responsive）

还我tryed这一点：

.brand { 
    margin:0 auto !important; 
    padding:0 auto !important; 
    position:absolute !important; 
    right:0px; 
    left:0px; 
    z-index:9999999999 !important; 

}

来源

2013-01-23 sbaaaang

有在本例中没有CSS。您可以使用左侧的添加资源添加引导程序。 – sachleen

@sachleen -1呢？ – sbaaaang

你的例子并没有说明你的问题，所以我们怎么能看到发生了什么？ – sachleen

.navbar .brand { 
    margin-left: auto; 
    margin-right: auto; 
    width: 60px; 
    float: none; 
}

我给它一个任意宽度，将它设置为任何你想要的。

jsFiddle

来源

2013-01-23 18:14:35 Sara

我爱萨拉，只是你忘了bootstrap js，在这里查看你的代码;）http://jsfiddle.net/J4zkJ/7/ – sbaaaang

你说得对，但我没有想到它是一个CSS问题的必要;） – Sara

没有问题，你catched – sbaaaang

使用自举3

我添加了三个班我global.less文件，以加强引导navbar.less类。

这种方法可以通过所有响应式@media规则大小工作，但是您需要根据菜单项的宽度调整字体大小和菜单折叠点（这种方法绝对定位了导航栏品牌 - 它“浮动“在其他菜单项上）。

风格：

.navbar-brand-centered { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    height: 50px; 
    width: 200px; /* bootstrap has max-width: 200px rule */ 
    margin-left: -100px; 
    margin-top: 8px; 
    text-align: center; 
    } 

    .navbar-brand-centered { 
    color: @navbar-inverse-brand-color; 
    &:hover, 
    &:focus { 
     color: @navbar-inverse-brand-hover-color; 
     background-color: @navbar-inverse-brand-hover-bg; 
    } 
    } 

    .navbar-brand-centered { 
    display: block; 
    max-width: 200px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: @navbar-padding-vertical @navbar-padding-horizontal; 
    font-size: @font-size-large; 
    font-weight: 500; 
    line-height: @line-height-computed; 
    color: @navbar-brand-color; 
    text-align: center; 
    &:hover, 
    &:focus { 
     color: @navbar-brand-hover-color; 
     text-decoration: none; 
     background-color: @navbar-brand-hover-bg; 
    } 
    }

用法：

<div class="navbar navbar-fixed-top"> 
    <!-- .navbar-toggle is used as the toggle for collapsed navbar content --> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    <!-- Be sure to leave the brand out here if you want it shown --> 
    <a class="navbar-brand-centered" href="/"><span style="font-size: 2em">mess<span style="color: red;">2</span>dress</span></a> 

    <!-- Place everything within .navbar-collapse to hide it until above 768px --> 
    <div class="nav-collapse collapse navbar-responsive-collapse"> 
     <!-- YOUR MENU ITEMS HERE -->

这为我工作，但我敢肯定有，以与引导的基于浮动的方式整合更好的办法实现。反馈意见。

来源

2013-09-17 20:47:12

我只是用那些我style.css文件和它的工作对我来说：

 

    /* The header of the navbar */ 
    .navbar-header { 
     text-align: center; 
     margin: 10px; 
     float: none !important; 
    } 

    /* The website name */ 
    .navbar-brand { 
     float: none !important; 
    }

来源

2014-09-24 13:57:07 Napi

Twitter的引导 - 在导航栏

回答

相关问题