我一直在使用 bootswatchr 自定义bootstrap 3查找我的更改,但是,当我的.json
加载到bootstrap时导航栏没有'看起来一样。
这是我想要的导航栏外观(如BootSwatchr中所示):
以下是将设置导入bootstrap后的结果:
我的变数:
//== 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/
答案 0 :(得分:0)
通过从视图中删除不必要的css链接来解决问题...
<link href="${pageContext.request.contextPath}/resources/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />