Bootstrap 用于显示和居中元素的响应式媒体查询在 Ralis 上不起作用
Bootstrap Responsive Media Query for Showing and Centering Elements Not Working on Ralis
我目前正在使用 Bootstrap V4,我正在尝试创建响应式导航栏。在 ipad 和所有移动设备上,我希望我的导航栏 brand/title 居中对齐并使链接消失,并显示粘性底部导航栏。目前,我遇到三个问题:
- 我不确定如何让粘性底部导航仅出现在 ipad 屏幕宽度及以下。
- 文本居中似乎不起作用。
- 在较小的屏幕宽度上,底部导航栏上的 li 链接会变成垂直列表。
目前,这是我的 _nav.html.erb
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" id='title' href="#">App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Leaderboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Challenges</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
</ul>
</div>
<nav class="navbar fixed-bottom navbar-light bg-light justify-content-center" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Leaderboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Challenges</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
</ul>
</nav>
</nav>
这是我的 application.scss
@import "bootstrap";
.navbar{
background-color:pink;
}
@media only screen and (max-width: 1200px) {
.navbar-brand {
display:inline-block;
text-align: center;
}
}
如有任何帮助或反馈,我们将不胜感激!
您可以将 bootstrap class d-{size}-none
添加到导航固定底部,例如 d-md-none
。 md
代表一个 bootstrap 断点。您可以覆盖它,甚至可以根据需要添加其他内容。如果不满意,您可以使用 display: none
添加媒体断点到您的页脚导航。
text-align 不适用于 inline-block。标签宽度将与文本相同,因此文本已经居中。
你可以试试 display: block; width: 100;
。这将使文本居中,。或者使用 text-center
class 到你的 parent。但是您的导航栏上的其他元素(例如按钮元素)仍然可能会出现问题,这些元素可能会损害您的 nav-brand 完全居中。
一种保证方法是使用如下所示的绝对位置(您只需证明 parent 已声明其位置,在 bootstrap 情况下它已声明):
@media only screen and (max-width: 1200px) {
.navbar-brand {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
- bootstrap 使用 display flex to ul 元素对齐 li 元素。它在大屏幕上将
flex-direction
设置为行方向,而在小屏幕上它设置为列方向。你想成为 row
更小的方向所以你需要覆盖成为 row
只需将 ul class 设置为 navbar-nav flex-row
.
您将面临另一个问题,因为 bootstrap 还会在较小的屏幕上将锚标记上的所有水平填充覆盖为零。要具有与以前相同的填充,您可能需要将每个 link class 设置为 nav-link px-2
,或者根据您的喜好为锚标记设置另一个水平填充。
我目前正在使用 Bootstrap V4,我正在尝试创建响应式导航栏。在 ipad 和所有移动设备上,我希望我的导航栏 brand/title 居中对齐并使链接消失,并显示粘性底部导航栏。目前,我遇到三个问题:
- 我不确定如何让粘性底部导航仅出现在 ipad 屏幕宽度及以下。
- 文本居中似乎不起作用。
- 在较小的屏幕宽度上,底部导航栏上的 li 链接会变成垂直列表。
目前,这是我的 _nav.html.erb
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" id='title' href="#">App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Leaderboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Challenges</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
</ul>
</div>
<nav class="navbar fixed-bottom navbar-light bg-light justify-content-center" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Leaderboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Challenges</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
</ul>
</nav>
</nav>
这是我的 application.scss
@import "bootstrap";
.navbar{
background-color:pink;
}
@media only screen and (max-width: 1200px) {
.navbar-brand {
display:inline-block;
text-align: center;
}
}
如有任何帮助或反馈,我们将不胜感激!
您可以将 bootstrap class
d-{size}-none
添加到导航固定底部,例如d-md-none
。md
代表一个 bootstrap 断点。您可以覆盖它,甚至可以根据需要添加其他内容。如果不满意,您可以使用display: none
添加媒体断点到您的页脚导航。text-align 不适用于 inline-block。标签宽度将与文本相同,因此文本已经居中。
你可以试试 display: block; width: 100;
。这将使文本居中,。或者使用 text-center
class 到你的 parent。但是您的导航栏上的其他元素(例如按钮元素)仍然可能会出现问题,这些元素可能会损害您的 nav-brand 完全居中。
一种保证方法是使用如下所示的绝对位置(您只需证明 parent 已声明其位置,在 bootstrap 情况下它已声明):
@media only screen and (max-width: 1200px) {
.navbar-brand {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
- bootstrap 使用 display flex to ul 元素对齐 li 元素。它在大屏幕上将
flex-direction
设置为行方向,而在小屏幕上它设置为列方向。你想成为row
更小的方向所以你需要覆盖成为row
只需将 ul class 设置为navbar-nav flex-row
.
您将面临另一个问题,因为 bootstrap 还会在较小的屏幕上将锚标记上的所有水平填充覆盖为零。要具有与以前相同的填充,您可能需要将每个 link class 设置为 nav-link px-2
,或者根据您的喜好为锚标记设置另一个水平填充。