我有以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.class1 {height: 100px; background-color: DarkSlateGrey}
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="col-xs-6">Website</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
</div>
</div>
</body>
</html>
我的问题是: 当我“检查”以在移动设备上查看网站时:
-背景不会占据手机的所有宽度。
-单词“services”重叠，我希望它们之间有一些空格分开
如何避免这些问题？任何帮助将不胜感激
最佳答案
您在 row 内的每个 child 的宽度太小了。对于手机尺寸，您将 div 设置为手机屏幕宽度的 1/12。您可以向它添加填充和 overflow: hidden ，这样它就不会超过所需的宽度，但这对我来说似乎并不理想。我根据您的代码添加了一个示例代码作为您探索的选项。如果屏幕小于 >=720px (col-md) 那么你在行中的第一个 child 将占据全宽，并为其余部分留出更多空间，这样看起来更像样。
.class1 {
height: 100px;
background-color: DarkSlateGrey
}
.tomato{
background: tomato;
}
.white{
background: white;
}
row div{
text-align: center
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="tomato col-xs-12 col-md-6">Website</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
</div>
</div>
</body>
</html>关于html - Bootstrap : overlapping columns，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52559974/