Загрузка контента Bootstrap по всей ширине Navbar на мобильном сайте - сайт академической конференции - PullRequest
Новая
       14

Загрузка контента Bootstrap по всей ширине Navbar на мобильном сайте - сайт академической конференции

0 голосов
/ 22 июня 2019

Я разрабатываю веб-сайт для конференции по биомедицинской инженерии с использованием Bootstrap и испытываю некоторые затруднения при настройке его для мобильных устройств.

В частности, на странице с названием cochairs.html свернутая панель навигации не имеет той же ширины, что и содержимое под ней.

Co Chairs Page

Не зная, как решить эту проблему, я обернул все теги navbar и image в контейнер с 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. Любая помощь приветствуется, спасибо:)

1 Ответ

0 голосов
/ 23 июня 2019

Попробуйте добавить класс img-Fluid к вашим изображениям. 

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

Это сделает изображения чувствительными к размеру экрана и теперь вытолкнет их за пределы поля.

...