【问题标题】:How to make a navigation bar flat?如何让导航栏变平?
【发布时间】:2017-09-02 21:00:26
【问题描述】:

过去几天我一直在使用 bootswatchr 自定义 bootstrap 3 外观以实时查看我的更改,但是,当我的 .json 加载到 bootstrap 中时,导航栏看起来不相同。

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

这是我将设置导入引导程序后得到的结果:

我的变量:

//== 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/

【问题讨论】:

  • 添加一个包含相关css和菜单的jsfiddle链接
  • 为什么 JSFiddle 以正确的方式显示它,但在我的项目中却不同?我能做些什么? @Dekel
  • jsfiddle 可能缺少您在项目中拥有的一些 css。当你明白什么的那一刻 - 问题解决了:)
  • 你是绝对正确的,@Dekel ...通过从我的视图中删除 bootstrap-theme.min.css 链接解决了问题。非常感谢! (:
  • 这就是为什么我不喜欢任何框架并且更喜欢从头到尾手动工作的原因——所有框架都只按照它们的预编码方式运行,任何更改都非常耗时。在这里,我会做一些重新定义,我会包含我自己的 css 文件并通过开发控制台挖掘找到相关的类 id 并自己覆盖框架定义(如果你最后链接你的文件,它将覆盖以前的定义。如果这会没有帮助,请在定义中使用 !important

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


【解决方案1】:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-02-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-26
    • 2023-02-05
    • 2020-01-10
    相关资源
    最近更新 更多