Bootstrap 内容溢出移动导航栏宽度--学术会议网站

Question

我正在使用 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 比较陌生。任何帮助表示赞赏，谢谢:)

Answer 1

尝试将 img-fluid 类添加到您的图像中。

<img src = "anderson.jpg" alt = "anderson" class = "img-fluid img-container circle-img rounded-circle">

这将使图像响应屏幕尺寸，现在将它们推到边缘之外。