Question

我正在使用Bootstrap设计一个用于生物医学工程会议的网站，但在为移动设备进行配置时遇到了一些麻烦。

具体来说，在标题为cochairs.html的页面上，折叠的导航栏与下面的内容共享不同的宽度。

不确定如何解决此问题，我将所有导航栏和图像标签包装在带有类=“ 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">

这将使图像响应屏幕尺寸，然后将其推到页边距之外。

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

1 个答案: