Question

我尝试从这里自定义bootstrap 4的封面模板： https://getbootstrap.com/docs/4.0/examples/cover/

我成功替换了页面的内容，并且根据需要，它可以很好地响应任何小屏幕尺寸。

然而，以下的桅顶和桅杆不会像所希望的那样以响应的方式作出反应，所以例如， iPhone 7引入了水平滚动。

<div class="site-wrapper">

  <div class="site-wrapper-inner">

    <div class="cover-container">

      <div class="masthead">
        <div class="inner">
          <h3 class="masthead-brand">myLogo</h3>
          <nav class="nav nav-masthead">
            <a id="link1" class="nav-link active" href="#">longLongText1</a>
            <a id="link2" class="nav-link" href="#"> longLongText2</a>
            <a id="link3" class="nav-link" href="#"> longLongText3</a>
            <a id="link4" class="nav-link" href="#"> longLongText4</a>
            <a id="link5" class="nav-link" href="#"> longLongText5</a>
            <a id="link6" class="nav-link" href="#"> longLongText6</a>
          </nav>
        </div>
      </div>

...页面内容......

      <div class="mastfoot">
        <div class="inner">
          <p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
          <p id="debugIncidentContent">
               Lengthy lengthy debug information goes in here...
          </p>
        </div>
      </div>

    </div>

  </div>

</div>

当我大幅减少桅顶和桅杆中的内容时，问题就不再可见了。所以我知道桅顶和桅杆是打破响应行为的根本原因，但我当然希望将它们与正确的内容一起使用。

是否有任何方法可以提高响应速度？非常感谢您花时间处理明显的新手问题......！

Bootstrap 4，封面模板，标头和放大器mastfoot不要调整大小

0 个答案: