小贝子编程

巨型和页脚没有延伸到移动电话屏幕设备的宽度



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

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

这是因为类row有margin-left:-15px和margin-right:-15px，它正好在类w-100有width:100! important;我对以下 2 个实例进行了更改：

  • 实例 1：您可以删除row，因为您没有使用col-**类
  • 实例 2：由于它下面有col-**类，因此您可以在它周围添加一个container-fluid，以便row不会超出屏幕视图

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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium