html - Jumbotron 和 Footer 没有拉伸(stretch)到手机屏幕设备的宽度

标签 html css bootstrap-4

点击检查谷歌浏览器。当我在“切换设备工具栏”选项上向下滚动页面时。我的 Jumbotron 和 Footer 没有拉伸(stretch)到手机的全屏宽度。我已将代码推送到 CodePen.io 上供您查看。下面提供了链接。我还注意到，在检查 html 中的 body 标签时，它准确地告诉我中断发生的位置。

CodePen.io 
https://codepen.io/alexbritoofficial/pen/MWYpbRg

最佳答案

这是因为类 row 有 margin-left:-15px & margin-right:-15px 就在类 w-100 有 width:100!重要;我对以下 2 个实例进行了更改:

  • Instance1:您可以删除 row，因为您没有使用 col-** 类
  • Instance2:因为您确实在其下有 col-** 类，所以您在其周围添加一个 container-fluid 以便 row 不会超出屏幕 View 

body {
  height: 100%;
  background-color: #fccd4d;
}

.myNavbar {
  background-color: black;
}

.jumbotron {
  background-image: url("/Project/img/Unknown.png");
  height: 400px;
  background-size: 100% 100%;
  margin: inherit;
}


/* Navigaton Bar List Items CSS */

.menuItems {
  white-space: nowrap;
}

.listItem {
  padding-left: 30px;
  padding-right: 30px;
}

.listItemText {
  font-family: "Calistoga", cursive;
  color: white;
  white-space: nowrap;
  display: inline-block;
  font-size: 18.2px;
}

.listItemText:hover {
  color: white;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-family: "Calistoga", cursive;
}

.dropdown-content a:hover {
  background-color: #bd3f055b;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.hrSeperator {
  border-color: black;
}

.divSpacer1 {
  height: 10px;
}

.appetizersH1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  color: black;
}

.container {
  padding-top: 50px;
}

.main-container {
  padding-top: 10px;
}


/* Menu Choice Item Styling */

.menuChoiceItem {
  white-space: nowrap;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 30px;
  font-weight: bold;
  color: black;
}

.footerContainer {
  justify-content: space-between;
  height: 300px;
  background-color: black;
  margin: inherit;
  display: flex;
}

.coastCafeFooterH1 {
  white-space: nowrap;
  font-family: "Girassol", cursive;
  color: white;
}

.coastCafeFooterParagraph {
  white-space: nowrap;
  font-family: "Girassol", cursive;
  color: white;
}

.plate-identifier {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: black;
}

blockquote .menu-item-h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: black;
  font-weight: bold;
}

.appetizer-description {
  color: black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Gelasio|Girassol&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="CSS/menuCSS.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie-edge" />
<!-- ------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------ -->
<!-- Navigation Bar -->

<div class="w-100">
  <div class=""> <!-- instance1 -->
    <nav class="navbar myNavbar navbar-expand-lg navbar-collapse w-100 fixed-top">
      <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target" style="
        background-color: yellow;">
          <span
            class="navbar-toggler-icon"
          ></span>
        </button>
      <a class="navbar-brand"><img class="img-fluid" src="img/CoastCafeLogoNavIcon.png" /></a>
      <span class="navbar-text listItemText"> </span>
      <div class="collapse navbar-collapse justify-content-center" id="collapse_target">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="index.html" class="nav-link font-weight-bold listItemText" href="index.html"><i class="fa fa-home"></i> Home</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link font-weight-bold listItemText" href="#"
                >Our Story</a
              >
            </li>
            <li class="nav-item listItemText">
              <div class="dropdown">
                <a class="nav-link font-weight-bold listItemText">Our Menu</a>
            <div class="dropdown-content">
              <a href="appetizers.html" class="menuItems">Appetizers</a>
              <a href="combinationPlates.html" class="menuItems">Combination Plates</a
                  >
                  <a href="coastSpecialties.html" class="menuItems"
                    >Coast Specialties</a
                  >
                  <a href="chickenBoxes.html" class="menuItems"
                    >Chicken Boxes</a
                  >
                  <a href="classicSandwiches.html" class="menuItems"
                    >Classic Sandwiches</a
                  >
                  <a href="signatureSides.html" class="menuItems"
                    >Signature Sides</a
                  >
                  <a href="homemadeDesserts.html" class="menuItems"
                    >Homemade Desserts</a
                  >
                </div>
              </div>
            </li>
            <li class="nav-item">
              <div class="dropdown">
                <a class="nav-link font-weight-bold listItemText" href="#"
                  >Catering</a
                >
                <div class="dropdown-content">
                  <a href="#" class="menuItems">Request an Event</a>
            </div>
      </div>
      </li>
      <li class="nav-item">
        <a class="nav-link font-weight-bold listItemText" href="#">Order Online</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link font-weight-bold listItemText" href="#"
                >Contact Us</a
              >
            </li>
          </ul>
        </div>
        <div class="pr-5 mr-5"></div>
      </nav>
    </div>
    <!-- End of NavBar -->
    <!-- Coast Cafe Logo -->
    <div class="container-fluid"><!-- instance2 -->
    <div class="row">
      <div class="col-4 d-flex"></div>
      <div class="col-4 text-center">
        <img
          src="img/CoastCafeLogoUpdated.png"
          class="img-fluid text-center pt-5 mt-5 mx-auto"
        />
      </div>
      <div class="col-4 d-flex text-right"></div>
    </div>
    </div>
    <!-- End of the Combination Plates Menu Title  -->

    <div class="container mt-5 pt-5">
      <div class="row">
        <div class="col">
          <h1
            class="appetizersH1 display-1 text-sm-center text-md-center text-lg-center text-xl-center "
          >
            Appetizers
          </h1>
        </div>
      </div>
      <hr class="ml-5 mr-5 hrSeperator" />
      <!-- First Row Menu Items -->
      <div class="row mt-5 pt-5">
        <div class="col">
          <blockquote>
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left text-lg-left text-xl-left"
            >
              Corn Bread
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
        <div class="col">
          <blockquote>
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left txt-lg-left text-xl-left"
            >
              Beef Patty
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
        <div class="col">
          <blockquote class="blockquote">
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left text-lg-left text-xl-left"
            >
              Beef & Cheese Patty
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
      </div>
      <!-- Second Row of Menu Items -->
      <div class="row mt-5 pt-5 d-flex">
        <div class="col">
          <blockquote>
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left text-lg-left text-xl-left"
              style="white-space: nowrap;"
            >
              Chicken & Cheese Patty
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
        <div class="col">
          <blockquote>
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left txt-lg-left text-xl-left"
              style="white-space: nowrap;"
            >
              Jerk Chicken & Cheese Patty
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
        <div class="col">
          <blockquote>
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left text-lg-left text-xl-left
              "
              style="white-space: nowrap;"
            >
              Buffalo Chicken & Cheese Patty
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
      </div>
      <!-- Third Row of Menu Items -->
      <div class="row mt-5 pt-5">
        <div class="col">
          <blockquote>
            <h1 class="menu-item-h1 blockquote text-center">
              Fries
            </h1>
          </blockquote>
          <p class="d-flex justify-content-center appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="d-flex justify-content-center appetizer-description">
            (Sm) $4.00
          </p>
          <p class="d-flex justify-content-center appetizer-description">
            (XL) $4.00
          </p>
        </div>
      </div>
    </div>
    <!-- End of Main Content Body -->

    
    <div class="jumbotron jumbotron-fluid display-4 mt-5 pt-5"></div>

    <!-- Footer -->
    <div class="footerContainer justify-content-center">
      <div class="row pt-5">
        <div class="col-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 pt-3">
          <h1 class="coastCafeFooterH1 d-flex justify-content-center">
          
          </h1>
          <p class="coastCafeFooterH1 d-flex justify-content-center">
 
          </p>
          <div class="coastCafeFooterH1 d-flex justify-content-center">
         
          </div>
          <div class="d-flex pt-3">
            <a href="">
              <i class="fab fa-instagram fa-2x" style="color: white;"></i>
            </a>
        <a href="https://www.facebook.com/thecoastcafe">
          <i class="fab fa-facebook-f fa-2x pl-5" style="color: white;"></i>
        </a>
        <a href="">
          <i class="fab fa-twitter fa-2x pl-5" style="color: white;"></i>
        </a>
  </div>
</div>
</div>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-analytics.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<!-- JS & JQUERY -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</div>

关于html - Jumbotron 和 Footer 没有拉伸(stretch)到手机屏幕设备的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59415660/

上一篇：css - react-bootstrap css .style 为按钮添加多种样式

下一篇：html - 网站 HTML/CSS 底部不需要的空白

相关文章：

javascript - 将 Bootstrap 添加到现有标题以进行折叠并使用 Bootstrap 动画

twitter-bootstrap - 卡中的 Twitter bootstrap data-src 不起作用

html - 如果元素的文本内容太长，如何在布局网格中强制换行？

css - Bootstrap Modal 无法滚动

css - HTML & CSS 如何防止 div 扩展到窗口的高度？

html - CSS 技巧 : get property value into another css tag

javascript - 让网页看起来像一本书

javascript - 受 Windows 显示设置影响的 Firefox 缩放

javascript - 将HTML Table中的信息拆分并与 "header"信息合并

html - 此时元素 "integrity"不允许属性 "script"

©2024 IT工具网  联系我们