移动设备上的MDbootstrap大空格
移动设备上的MDbootstrap大空格
提问于 2020-08-26 17:00:25
我目前正在开发一款在中型和大型设备上看起来都不错的Watch2Gether克隆版，但一旦你进入手机视图，一切看起来都很棒，直到你向左滚动，发现右侧有一个巨大的空格。我不太确定为什么会发生这种情况，我试着改变了一些项目的边距和填充，这对UI有帮助，但当你滚动时仍然有一个巨大的空白，这看起来真的很糟糕。你知道怎么解决这个问题吗？
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Description -->
<meta name="description" content="Watch Youtube videos live with your friends, easily, for free!">
<!-- Favicon -->
<link rel="icon" href="/img/favicon.ico">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/styles.css" />
<title>Room</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">WatchWithFriends</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/create">Create Room</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
<input autocomplete="off" id="paste" name="paste" class="form-control form-control-md"placeholder="Paste Video URL Here" aria-label="Search">
<button id="watch" class="btn btn-outline-success waves-effect" type="submit">Watch</button>
</div>
</nav>
<div class="section">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-12 main-section">
<h1 id="roomBasic"><span id="name"></span><span id="users"></span></h1>
<div id="player"></div>
</div>
<div class="col-lg-4 col-md-5 col-sm-12">
<div id="chat-holder">
<div id="mario-chat">
<a id="leave" href="/" class="btn btn-primary btn-block btn-lg leave">Leave Room</a>
<div id="chat-window">
<div id="output"></div>
<div id="feedback"></div>
</div>
<form action="" id="chat-form">
<input
type="text"
id="message"
placeholder="Message"
required
autocomplete="off"
class="form-control form-control-lg"
/>
<button class="btn btn-black btn-block" id="send" onclick="reload()">Send</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-md-8">
<h3 id="welcome-room">Welcome to your room!</h3>
<p class="room-info-p">
To invite a friend, just copy the link below. To change their name they
just have to replace the name in the "username" field. Ex:
username=Billy -> username=Ryan. They can also join using the "Join Room" page.
</p>
<div class="input-group mb-3">
<input id="urlInfo" type="text" class="form-control" placeholder="Url">
<div class="input-group-append">
<button onclick="copyUrl()" class="btn btn-md btn-outline-dark m-0 px-3 py-2 z-depth-0 waves-effect" type="button" id="button-addon2">Copy</button>
</div>
</div>
<p class="room-info-p">To play a new video, paste the URL into the form in the navigation bar and press watch!</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="client.js"></script>
<script src="users.js"></script>
<%- include('partials/footer') %>CSS：
/* room page */
#name {
color: #575ed8;
}
#roomBasic {
font-weight: 600;
}
.section {
height: 80vh;
}
#mario-chat {
max-width: 500px;
border: 1px solid #ddd;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.05);
border-radius: 2px;
}
#chat-holder {
margin: 11vh 3vh;
}
#chat-window {
height: 50vh;
overflow: auto;
background: #f9f9f9;
}
#sentText {
padding: 14px 0px;
margin: 0 20px;
border-bottom: 1px solid #e9e9e9;
color: #555;
}
#sentText p {
font-size: 1.1rem;
margin-bottom: 0.1px;
}
#feedback p {
color: #aaa;
padding: 14px 0px;
margin: 0 20px;
}
#output strong {
color: #575ed8;
}
#mario-chat input {
padding: 10px 20px;
box-sizing: border-box;
background: #eee;
border: 0;
display: block;
width: 100%;
background: #fff;
border-bottom: 1px solid #eee;
font-size: 16px;
}
#send {
background-color: #292b2c;
color: #fff;
font-size: 18px;
border: 0;
padding: 12px 0;
width: 100%;
border-radius: 0 0 2px 2px;
}
#player {
margin: 30px 30px;
border: 1px solid #ddd;
height: 62vh;
width: 100%;
}
.main-section h1 {
margin-left: 30px;
margin-top: 20px;
}
.info {
margin: 30px 30px;
}
.leave {
background: #575ed8;
font-size: 18px;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
/* info section */
.info {
height: 50vh;
font-family: "Roboto", sans-serif;
}
#welcome-room {
font-weight: 600;
}回答 1
Stack Overflow用户
发布于 2020-08-26 17:05:08
我也遇到了同样的问题，这个meta tag belon帮助了我：
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
或//来自另一个主题
诚然，row类是导致问题的原因，但这是因为它总是被放在容器元素中。
来自http://getbootstrap.com/css/：
必须将行放置在.container (固定宽度)或.container-fluid (全宽)中，以便正确对齐和填充。
容器元素的左右两侧通常都有-15px的填充，row类的左右两侧通常都有15px的填充。两者相互抵消。如果两者中的一个不存在，您将看到额外的空间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63594142
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号