- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我一直在尝试让我的导航栏品牌 Logo 和轮播都具有响应性,但似乎没有任何效果。如果我减小屏幕尺寸,品牌形象就会溢出导航栏,而轮播看起来又长又笨拙。我的代码如下。
轮播 HTML
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class = "carousel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="#" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3></h3>
</div>
</div>
<div class="carousel-item">
<img src="#" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3></h3>
</div>
</div>
导航栏 HTML
<nav class="navbar navbar-custom navbar-expand-lg fixed-top">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="" width="30" height="50" alt="">
</a>
...
</nav>
最佳答案
我通过添加图像测试了您的代码,看起来一切都配置正确。但是,您可能想看看您是如何配置 CSS 的。
尝试添加(最新的缩小 CSS):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
此外,您可能混合使用了不同的 bootstrap 4 和 3 元素(我看到您使用了 img-responsive
作为 Logo - Bootstrap 4 中不再使用它,现在是 img-流体
)。如果是这样,试试这个导航栏:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/50" class="d-block w-100" alt="..."></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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
关于html - Bootstrap Navbar 和 Carousel 没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54887786/
我仍在学习网页设计的诀窍,并且我无法理解一些事情是如何工作的...... 我创建了一个函数来切换导航栏标题背景颜色,我发现以下内容是正确的,但不确定原因: 作品: $(".navbar.navbar-
在 Twitter bootstrap 2.3.2 中,我可以有类似的东西: http://jsfiddle.net/aQwUZ/3/
我是 bootstrap、jquery 和 javascript 的新手,我在一个网站上工作,但我遇到了一个问题。 . .我需要顶部的导航栏在超小屏幕上以折叠状态加载。现在,该栏在 XS 屏幕上是垂直
我正在学习使用 Ruby on Rails 编写代码,并且正在制作一个随机网页。我添加了 Bootstrap 导航栏。 我正在尝试将导航栏的边框更改为无,而不是: .navbar { bord
每当我学习 ionic 的教程时,我都会看到短语 *navbar。这是什么意思?我知道 * 表示它在模板中插入标签,但无法真正理解这个表达式.. 最佳答
我不知道如何正确表达这一点,但我想做的是让顶部栏( http://puu.sh/iNdBj/7f11027db0.png )在向下滚动时折叠并在回到顶部时重新出现,我想让底部栏填充顶栏的位置。 目前的
这是我第一次使用 bootstrap,我使用 roots 主题作为准系统模板。我在 header-top-navbar.php 的 navbar-header 元素中放置了一个图像我还将它放在一个 d
在我网站的顶部,主要的导航类是: navbar navbar-default navbar-fixed-top bg 我正在努力做到这一点,当你滚动时,类会更改为这样我就可以创建一个更优雅、更简单的滚
这是我的问题: collapse problem 如您所见,我的 navbar-collapse div 进入了导航栏区域。你能帮我解决一下吗? Title
我已经为类尝试了很多不同的选项来更改 navbar 上的文本颜色,特别是 navbar-brand 元素。我的 .navbar-brand color:purple; CSS 类没有运行。你能帮我弄清
我正在尝试使用 nav navbar-nav navbar-right 创建一个下拉菜单。我让它在移动设备(较小的屏幕)上对齐但是当我点击下拉菜单时它不会将菜单项向下推但是而是下拉其他菜单项。我不确定
我的导航栏没有改变颜色。 Navbar.jsx 文件中的 Navbar.css 文件的路径是否正确? import React, { Component } from 'react'; import
我无法让我的 navbar-header 和 navbar-nav 元素正确排列。 navbar-header 在 navbar 中垂直居中,而 navbar-nav 看起来像是 align="top
当我的屏幕宽度达到 767px 时,导航会异常折叠。当我转到 768px 时,navbar-nav 会低于 navbar-brand。直到我达到 795px,navbar-brand 和 navbar
我正在尝试实现一个固定的导航栏,但是在一定的屏幕尺寸(〜宽度:989)之后,导航栏向下移动。它也不适用于移动设备。 图片: 导航栏完全贴在页脚上,而不是停留在页面顶部。 您可以在以下位置查看代码:ht
我正在尝试右对齐我的 NavBar,但每当我添加 float:right 时,导航栏都会向右移动,但似乎已禁用。 参见此处:goo.gl/46yUrt 代码: /** * 4.2 Navigatio
我正在使用 Bootstrap 4,我希望我的 navbar-toggler 出现在 navbar-brand 之前,例如 this ,但是如果我将 navbar-toggler 放在第一位,我的对齐
如何使 navbar-header 全宽或单独成一行? 我在 collapse navbar-collapse 上添加了 clear:both; 但所有的填充都弄乱了。
.navbar 和 .navbar a 有什么区别 .navbar { overflow: hidden; background-color: #333;
在 Twitter bootstrap 的 starter-template.html 中,navbar 写成 ... 但是,如果我将标记更改为
我是一名优秀的程序员,十分优秀!