个人中心
gpt4 book ai didi

css - Bootstrap Navbar-Brand Text 不缩小

转载 作者：太空宇宙 更新时间：2023-11-04 11:48:47 25 4
gpt4 key购买 nike

我的品牌是一个字符串，我想在 md 和大屏幕上放大字体大小。

我在我的 CSS 文件中尝试了以下 CSS 覆盖，但遗憾的是它被忽略了。我不想使用基于 px 的 if 语句来执行此操作。有人知道该怎么办吗？

    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
        <title>my site</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-modal-carousel.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/mycss.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
        <script src="js/bootstrap.min.js">
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
    </head>
<body>
            <div class="row row-top">
                <div class="col-sm-8 col-md-offset-2">                 
                  <nav class="navbar navbar-default">
                      <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                          <a class="navbar-brand" href="/home.html">my brand goes here and here</a>

                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                          <ul class="nav navbar-nav navbar-right">
                            <li><a href="/projects.html">Projects </a></li>
                            <li><a href="/services.html">tab2</a></li>
                            <li><a href="/aboutus.html">tab3</a></li>
                            <li><a href="/contactus.html">tab4</a></li>
                          </ul>
                        </div><!-- /.navbar-collapse -->
                      </div><!-- /.container-fluid -->
                    </nav>
                </div>
            </div>

CSS代码

@media (max-width: @screen-xs) {
        .navbar-brand {
        font-size:15px;
        }

}

@media (max-width: @screen-sm) {
            .navbar-brand {
        font-size:20px;
        }

}

@media (max-width: @screen-md) {
            .navbar-brand {
        font-size:30px;
        }

}
@media (max-width: @screen-lg) {
            .navbar-brand {
        font-size:50px;
        }

    }

最佳答案

您在媒体查询中使用了 max-width。所以下面的 Less 代码:

@media (max-width: @screen-lg) {
            .navbar-brand {
        font-size:50px;
        }

    }

编译成 CSS，如下所示:

@media (max-width: 1200px) {
  .navbar-brand {
    font-size: 50px;
  }
}

前面的意思是当您的屏幕宽度超过 1200 像素时，您的 font-size: 50px 将不会被应用。对于小于 1200px 的屏幕 @media (max-width: 1200px) 评估总是正确的!所以你的字体确实不会变小。

当使用 max-width 时，你应该从最大宽度开始:

@media (max-width: @screen-lg) {}
@media (max-width: @screen-md) {}
@media (max-width: @screen-sm) {}
@media (max-width: @screen-xs) {}

或者请注意，Bootstrap 的代码首先在移动设备上运行，另请参阅 http://getbootstrap.com/css/#grid-media-queries .首先定义没有任何媒体查询的样式规则(默认)，然后使用 min-width 等定义下一个宽度

如果你想设置一个max-width你可以使用:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

注意最大屏幕的@media 没有设置max-width。

您可以尝试使用以下 Less 代码:

@import "less/variables";
@import "less/mixins";

navbar-brand {
font-size:15px;
}

@media (min-width: @screen-sm) {
            .navbar-brand {
        font-size:20px;
        }

}

@media (min-width: @screen-md) {
            .navbar-brand {
        font-size:30px;
        }

}
@media (min-width: @screen-lg) {
            .navbar-brand {
        font-size:50px;
        }

    }

以上代码编译成CSS如下:

navbar-brand {
  font-size: 15px;
}
@media (min-width: 768px) {
  .navbar-brand {
    font-size: 20px;
  }
}
@media (min-width: 992px) {
  .navbar-brand {
    font-size: 30px;
  }
}
@media (min-width: 1200px) {
  .navbar-brand {
    font-size: 50px;
  }
}

演示:http://www.bootply.com/gMEHaCpSCB

关于css - Bootstrap Navbar-Brand Text 不缩小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30787604/

25 4 0
文章推荐： jquery - 带有滚动条的下拉菜单在 iPad 上不起作用
文章推荐： c++ - 如何为当前打开的窗口模拟鼠标滚动？
文章推荐： c++ - 正确添加到 vector
文章推荐： html - 移动宽度标题打破了水平布局
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com