Question

我正在处理我的第一个引导项目，目前正在设置导航栏。

我想要的是：当require riot ... require tag1 tag2 ...被激活时（或者是什么时候被调用），我想改变标题的字体大小，改变导航栏的高度并使标题对齐到左边。一切都必须正确地缩放。

有没有聪明的方法呢？

XS model

Answer 1

您需要使用媒体查询，Bootstrap切换点位于下方。最小的576将是您的起点，您可以在此处引用媒体查询：Collection.removeIf

Bootstrap: 

@media(min-width:576px){} 
@media(min-width:768px){} 
@media(min-width:992px){} 
@media(min-width:1200px){}

Answer 2

好的，我想我已经弄清楚了。

HTML：

<nav class="navbar navbar-xs navbar-default navbar-fixed-top" style="padding:0px;margin:0px;">
    <div class="hidden-xs" style="text-align:center;">
        <header style="font-size:48px;">
            <a href="/" style="color:black;">
                Header
            </a>
        </header>
    </div>
    <div class="visible-xs pull-left" style="margin:8px;">
        <header style="font-size:28px;">
            <a href="/" style="color:black;">
                Header
            </a>
        </header>
    </div>
    <div class="container" style="padding:0px;">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav" style="text-transform:uppercase;">
                <li><a asp-controller="Projects">Projects</a></li>
                <li><a asp-controller="Visuals">Visuals</a></li>
                <li><a asp-controller="Now">Now</a></li>
                <li><a asp-controller="About">About</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS：

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar {
    min-height: 60px;
}

.navbar-brand {
    padding: 0 15px;
    height: 60px;
    line-height: 60px;
}

.navbar-brand, .navbar-nav li a {
    line-height: 60px;
    height: 60px;
    padding-top: 0;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar-collapse {
    max-height:60px;
}

.navbar-toggle {
    margin-right:28px;;
}

修改小型设备上的导航栏

2 个答案: