html - 引导为什么我的页面在我的页面右侧有一个白条
问题描述
我试图让我的引导登陆页面对所有显示器都响应，所以我开始使用媒体查询来适应 iPhone、iPad 和其他设备上的页面，但是当我使用手机时，屏幕上有一个白条网页右侧还显示了整个模板，例如缩小了，右侧的白条上显示了一些 h1 标签。我将向您展示我的代码，希望有人可以帮助我，我整天都被困在这里。我需要帮助。我是前端开发的新手，所以不要给我一些建议。
<template>
<div class="container-fluid m-0 p-0">
<nav class="navbar navbar-expand-lg navbar-custom">
<a class="navbar-brand " href="http://exaple.com/">
<img src="../assets/logo.png" width="40" height="40" class="d-inline-block align-top" alt="">
example.com
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#sigUP" style="color:white;">Signin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mission" style="color:white;">Mission</a>
</li>
</ul>
</div>
</nav>
<div id="home-page" class="full-height p-4">
<div class="container pt-500">
<div class="row pb-6 pt-20">
<div class="col-lg-6 my-auto ">
<div class="text-right text-down mb-3 d-block d-lg-none">
<h1 class ="text-color text-right text-down">Hello,</h1>
<h1 class="display-1 text-color text-right text-down">Betatester!</h1>
</div>
</div>
<div class="col-lg-6 my-auto pt-6">
<div class="text-right text-down mb-3 d-none d-lg-block">
<h1 class ="text-color text-right text-down">Hello,</h1>
<h1 class="display-1 text-color text-right text-down" >Betatester!</h1>
</div>
</div>
</div>
</div>
</div>
<div id="about" class="bg-light p-3 p-md-5">
<div class="container-fluid">
<h1 class="display-1 text-color-about text-center" >example.com is </h1>
<div class="row">
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-left" >
the socialnetwork for you
</h1>
<h1 class="ml-md-4 mr-md-4 text-left text-color-about_p" >Freetime</h1>
<img src="../assets/exam1.png" height="100">
<img src="../assets/exam1.png" height="100">
<img src="../assets/exam1.png" height="100">
</div>
<div class="col-lg">
<img src="../assets/about.png" height="300" class="m-4">
</div>
</div>
</div>
</div>
<div id="marketplace" class=" p-4">
<div class="container-fluid">
<div class="row">
<div class="col-lg">
<img src="../assets/marketplace.png" height="400">
</div>
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-right" >
<h1 class="ml-md-4 mr-md-4 text-right text-color-about_m" >MARKETPLACE</h1>
where you can find all you need
</h1>
</div>
</div>
</div>
</div>
<div id="shops" class=" p-4">
<div class="container-fluid">
<div class="row">
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-left" >
the place where you can contact your
<h1 class="ml-md-4 mr-md-4 text-left text-color-about_s p-4" >FAVORITE </h1>
<h1 class="ml-md-4 mr-md-4 text-left text-color-about_p" >STORE</h1>
</h1>
</div>
<div class="col-lg">
<img src="../assets/shop.png" height="400">
</div>
</div>
</div>
</div>
<div id="comp" class=" p-4">
<div class="container-fluid">
<div class="row">
<div class="col-lg">
<img src="../assets/comp.png" height="400">
</div>
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-right" >
be
<h1 class="ml-md-4 mr-md-4 text-right text-color-about_m" >COMPETITIVE</h1>
blablablablablablablalbalba
</h1>
</div>
</div>
</div>
</div>
<div id="mission" class=" p-4">
<div class="container-fluid">
<div class="row">
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-left" style="display: inline-block" >
the
<h1 class="ml-md-4 mr-md-4 text-left text-color-about_s" style="display: inline-block" > MISSION </h1>
</h1>
<h3 class="ml-md-4 mr-md-4 text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dolor neque. Vivamus id ultrices nunc. Proin vulputate iaculis tortor ac rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in lobortis diam, eu ullamcorper ante. Pellentesque sodales felis sit amet metus laoreet sodales. Proin auctor nulla vitae porta pretium. Nullam tempor blandit sem vitae finibus.
</h3>
</div>
<div class="col-lg">
<img src="../assets/mission.png" height="400">
</div>
</div>
</div>
</div>
<div id="betatest" class=" p-3">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg">
</div>
<h1 class="ml-md-0 mr-md-0 text-center display-1">
Why you'll be
<h1 class="ml-md-4 mr-md-4 text-center text-color-about_b display-1">
Betatester?
</h1>
</h1>
</div>
<div class="row ">
<div class="col-lg">
<h1 class="ml-md-4 mr-md-4 text-center" style="font-size: 4em;">
be
<h1 class="ml-md-4 mr-md-4 text-center" style="display: inline-block; color:white;font-size: 4em;font-size: 1.2em">BETATESTER</h1>
helps us to make the best experience possible on example.com
</h1>
</div>
</div>
</div>
</div>
<div id="sigUP" class=" p-2">
<div class="container-fluid">
<div class="row justify-content-center pd-8">
<div class="col-lg pd-8">
<h1 class="ml-md-4 mr-md-4 text-center display-2">
Become
<h1 class="ml-md-4 mr-md-4 text-center text-color-about_sn display-4">
a BETATESTER
</h1>
</h1>
</div>
</div>
<div class="row justify-content-center pd-8">
<div class="col-lg ">
<img src="../assets/player.png">
<div class="row justify-content-center pd-8">
<div class="col-lg ">
<a href="/#/signupPlayer" class="btn btn-primary btn-lg btn-custom align-self-end" role="button">Player</a>
</div>
</div>
</div>
<div class="col-lg ">
<img src="../assets/store.png">
<div class="row justify-content-center pd-8">
<div class="col-lg ">
<a href="/#/signupStore" class="btn btn-primary btn-lg btn-customS " role="button">Store</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact" class="p-5">
<div class="container-fluid">
<div class="row justify-content-center mt-3 mb-3">
<div v-if="show_contact == true" class="col-lg-4" style="color:white">
<h2>Hai una domanda?</h2>
<p>Contact us!</p>
<div v-if="contact_notice != ''" class="alert alert-warning">
there's a problem. {{contact_notice}}
</div>
<form @submit.prevent="sendContactMessage()">
<div class="form-group text-left ">
<input v-model="contact_email"
type="email"
class="form-control"
placeholder="............"
>
<textarea v-model="contact_message"
class="form-control mt-3"
placeholder="..........."
rows="5"
></textarea>
</div>
<button type="submit" class="btn btn-primary">send</button>
</form>
</div>
<div v-else>
<h3>mail sent correctly!</h3>
<p>thanks for contact us!.</p>
</div>
</div>
</div>
</div>
<div id="footer" class=" p-4">
<footer class="text-light p-4">
<small>© 2020,example</small>
</footer>
</div>
</div>
</template>
<style scoped>
#home-page {
background-color: #ff9e0b;
background: url('../assets/bg_mt.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#about {
min-height: 40vh;
}
#contact {
background-color: #252223;
}
#marketplace {
background-color: #ff9e0b;
}
#comp {
background-color: #ff9e0b;
}
#footer {
background-color: #252223;
}
#betatest {
background-color: #ff9e0b;
}
.navbar-custom {
background-color: #ff9e0b;
}
/* Modify brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: white !important;
font-size: 1.5em !important;
}
.text-color{
color:white;
font-family: 'Mountserrat',sans-serif;
font-weight: 600;
}
.text-color-about{
color:#ff9e0b;
font-family: 'Mountserrat',sans-serif;
font-weight: 600;
}
.text-color-about_p{
color:#ff9e0b;
font-family: 'Mountserrat',sans-serif;
font-weight: 800;
font-size: 4em !important;
}
.text-color-about_s{
color:#ff9e0b;
font-family: 'Mountserrat',sans-serif;
font-weight: 800;
font-size: 3em !important;
}
.text-color-about_m{
color: white;
font-family: 'Mountserrat',sans-serif;
font-weight: 600;
font-size: 3em !important;
}
.text-color-about_b{
color:white;
font-family: 'Mountserrat',sans-serif;
align-self: center;
font-weight: 800;
font-size: 2em !important;
}
.text-color-about_sn{
color:#ff9e0b;
font-family: 'Mountserrat',sans-serif;
align-self: center;
font-weight: 800;
font-size: 1em !important;
}
.bg-primary{
color:#ff9e0b;
}
.bg-imgPlayer{
contain: url(../assets/store-02.png);
}
.btn-customS{
border-radius: 1rem;
background-color: #f23838 !important;
}
.btn-custom{
border-radius: 1rem;
background-color: #ff9e0b !important;
}
@media (max-width: 576px) {
.navbar-custom {
width:1152px; /* .... */
}
.navbar-custom {
width:1152px; /* .... */
}
.about {
width:1152px; /* .... */
}
.home-page {
width:1152px; /* .... */
}
....
}
@media (max-width: 375px) {
.navbar-custom {
width: 375px;
}
.about {
width:375px; /* .... */
}
.home-page {
width:375px; /* .... */
}
.marketplace {
width:375px; /* .... */
}
.shop {
width:375px; /* .... */
}
.comp {
width:375px; /* .... */
}
.mission {
width:375px; /* .... */
}
.betatest {
width:375px; /* .... */
}
.sigUP {
width:375px; /* .... */
}
.contact {
width:375px; /* .... */
}
.footer {
width:375px; /* .... */
}
}
</style>
解决方案
Bootstrap 4.3+ 引入了一个名为Responsive Font Sizes的新功能，而不是手动设置每个断点的字体大小。
您可以按照说明将其打开，然后您不必编写那么多媒体查询。事实上，如果你是新手，我强烈建议你学习SASS/SCSS 。您可以使用 SASS/SCSS 更轻松地自定义 Bootstrap。文档中有一个关于主题的完整部分。
此外，您永远不需要使用 Bootstrap 嵌套容器：
<!-- <div class="container-fluid m-0 p-0"> -->
<nav class="navbar navbar-expand-lg navbar-custom">
...
</nav>
<div id="home-page" class="full-height p-4">
<div class="container pt-500">...</div>
</div>
...
<div id="footer" class=" p-4">
...
</div>
<!-- </div> -->
我只是觉得有很多地方可以清理/改进代码。
推荐阅读
- flutter - Flutter 驱动程序测试覆盖率报告
- javascript - 如何在输入标签的 id 中使用此关键字并更改值 onclick() 事件
- android-studio - 错误：无法解析错误字符串 - 为什么会这样？
- javascript - 如何在reactjs中使用带有文件堆栈的api将原始文件作为formdata发布？
- sql-server - 执行 2 个位于 2 个变量中的查询并将结果存储在其他 2 个变量中
- javascript - 通过 javascript 文件将 HTML 输入值解析为 php
- html - 如何在不冲突的情况下将两个 div 彼此相邻对齐？
- java - 我的 for 循环中没有代码正在运行 - Java 8 SE
- regex - 搜索词后的 Regx 唯一数字
- swift - 如何在 Swift 中使用查询项解析 URL # 片段