html - Bootstrap 内容溢出移动导航栏宽度--学术会议网站
问题描述
我正在使用 Bootstrap 为生物医学工程会议设计一个网站,但在为移动设备配置它时遇到了一些麻烦。
具体来说,在标题为 cochairs.html 的页面上,折叠的导航栏与其下方的内容不共享相同的宽度。
不确定如何解决这个问题,我将所有导航栏和图像标签包装在一个带有 class = "text-center" 的容器中,希望这可以对齐所有页面的内容。
这是我的 cochairs.html 文件的相关部分:
<div container class = "text-center">
<nav class="navbar navbar-expand-lg navbar-light bg-light" style = "background-color: #0b98de;">
<a class="navbar-brand" href="index.html">NANODDS 2019</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="abstracts.html">Abstracts <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="speakers.html">Speakers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cochairs.html">Co-Chairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="agenda.html">Agenda</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "registration.html">Registration</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "travel-lodging.html">Travel/Lodging</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "venue.html">Venue</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "sponsors.html">Sponsors</a>
</li>
</ul>
</div>
</nav>
<h2 class = "text-center">Meet the Co-Chairs</h2>
<div class = "container">
<div class = "row">
<div class = "col">
<div class = "caption">
<img src = "anderson.jpg" alt = "anderson" class = "img-container circle-img rounded-circle">
<h4>Daniel Anderson</h4>
<p class = "text-center">Associate Professor, Chemical Engineering and Institute for Medical Engineering and Science, Massachusetts Institute of Technology</p>
</div>
</div>
<div class = "col">
<div class = "caption">
<img src = "qiaobing.png" alt = "qiaobing" class = " img-container circle-img rounded-circle">
<h4>Qiaobing Xu</h4>
<p class = "text-center">Associate Professor, Department of Biomedical Engineering, Tufts University</p>
</div>
</div>
</div>
</div>
</div>
如果您知道包含页面内容的任何有效方法,请告诉我。我猜这是一个相当简单的修复,我只是对 Bootstrap 比较陌生。任何帮助表示赞赏,谢谢:)
解决方案
尝试将 img-fluid 类添加到您的图像中。
<img src = "anderson.jpg" alt = "anderson" class = "img-fluid img-container circle-img rounded-circle">
这将使图像响应屏幕尺寸,现在将它们推到边缘之外。
推荐阅读
- python - Python如何将分类值映射到新的数值而不获取索引必须是整数错误?
- android - 从 Android 资源多次加载字符串数组的性能
- google-cloud-platform - 谷歌 AutoML 视频智能工具?
- regex - 过滤谷歌表格列以显示以多个值之一结尾的单元格
- python - 检测硬件图形支持
- ddev - 是否可以让 DDev 在启动后自动启动站点?
- python - Python游戏,答案错误的东西为什么会这样?
- apache-beam - 使用光束和 tf 变换创建通用句子编码器嵌入时出错
- flutter - Flutter Outline 在 android studio 中显示“Nothing to show”
- javascript - 如何在nodejs中使用事件和管道创建函数