如何使导航栏平整?

时间:2017-09-02 21:00:27

标签: jquery css twitter-bootstrap css3 twitter-bootstrap-3

我一直在使用 bootswatchr 自定义bootstrap 3查找我的更改,但是,当我的.json加载到bootstrap时导航栏没有'看起来一样。

这是我想要的导航栏外观(如BootSwatchr中所示):

desired navigation bar looks

以下是将设置导入bootstrap后的结果:

here's what I got

我的变数:

//== Navbar
//
//##

// Basics of a navbar
@navbar-height:                    50px;
@navbar-margin-bottom:             @line-height-computed;
@navbar-border-radius:             1px;//@border-radius-base;
@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height:       340px;

@navbar-default-color:             #777;
@navbar-default-bg:                #123D63;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);

// Navbar links
@navbar-default-link-color:                #fff;
@navbar-default-link-hover-color:          #fff;
@navbar-default-link-hover-bg:             #57B6D9;
@navbar-default-link-active-color:         #fff;
@navbar-default-link-active-bg:            #2DA4CF;//darken(@navbar-default-link-hover-bg, 6.5%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 6.5%);
@navbar-default-brand-hover-bg:            transparent;

// Navbar toggle
@navbar-default-toggle-hover-bg:           #ddd;
@navbar-default-toggle-icon-bar-bg:        #888;
@navbar-default-toggle-border-color:       #ddd;

是否有其他属性需要修改才能使我的导航栏看起来像预期的那样?

我应该创建一个CSS文件并从那里进行修改吗?

非常感谢帮助。

编辑:这是我的JSFiddle http://jsfiddle.net/MgcDU/13217/

1 个答案:

答案 0 :(得分:0)

通过从视图中删除不必要的css链接来解决问题...

<link href="${pageContext.request.contextPath}/resources/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />