当我将窗口调整为小尺寸时，右侧的内容被截断。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<title>Ingrid Voz</title>
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<section class="about">
<h2 id="trabajo">Cómo trabajo</h2>
<p id="about-subheading">Déjame adivinar cómo quieres tu trabajo…</p>
</div>
<div class="row">
<div class="about-container">
<div class="col a"></div>
<div class="col b">
<i class="fas fa-plane"></i>
<h3 class="about-h3">¿Lo quieres rápido?</h3>
<p class="about-p">Una virtud que destaca en mí es mi lealtad por mi trabajo. Me gusta ser rápida contestándote y entregándote la
grabación de tu proyecto.</p>
</div>
<div class="col c">
<i class="fas fa-trophy"></i>
<h3 class="about-h3">¿Quieres profesionalidad?</h3>
<p class="about-p">La rapidez no es suficiente si no mantienes una ética de trabajo completa. Cuando amas lo que haces los clientes lo
notan. ¡Echa un ojo a las opiniones de mis clientes!</p>
</div>
<div class="col d">
<i class="fas fa-dollar-sign"></i>
<h3 class="about-h3">¿Quieres un precio justo?</h3>
<p class="about-p">Dependiendo del tipo de proyecto que tengas, el precio y la entrega variarán, ¡pero siempre será un precio justo y
adaptado para ti!</p>
</div>
<div class="col e"></div>
</div>
</div>
<div class=row>
<p class="your-voice">¡Entonces soy tu voz!</p>
<div class="btn-container">
<a href="#" class="quote">¡Pide tu presupuesto!</a>
</div>
</section>
CSS
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
about, .contact {
min-height: 100vh;
background-image: linear-gradient(rgba(237, 99, 117, 0.9), rgba(237, 99, 117, 0.9)), url(Images/thumbnail_section\ COMO\ TRABAJO.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
position: relative;
min-width: 100%;
}
.about:after {
position: absolute;
width: 70px;
height: 70px;
top: 100%;
left: 50%;
margin-left: -35px;
content: '';
transform: rotate(45deg);
margin-top: -35px;
background-color: #D65A6A;
}
#trabajo {
color: white;
text-align: center;
font-weight: 400;
font-size: 150%;
position: relative;
margin-top: 10px;
letter-spacing: 1px;
}
#about-subheading {
text-align: center;
position: relative;
margin-top: 20px;
}
.about-container {
display: grid;
grid-template-columns: 120px 1fr 1fr 1fr 120px;
min-width: 100%;
}
.col {
text-align: center;
margin-top: 20px;
padding: 20px;
}
.fas {
font-size: 200%;
color: white;
}
.fa-plane {
transform: rotate(320deg);
}
.about-h3 {
margin-top: 30px;
font-size: 100%;
font-weight: 400;
}
.about-p {
margin-top: 20px;
font-size: 80%;
line-height: 23px;
font-weight: 100;
}
.your-voice {
text-align: center;
font-size: 100%;
margin-top: 20px;
}
.btn-container {
text-align: center;
}
.quote {
position: relative;
display: inline-block;
font-size: 80%;
text-decoration: none;
color: black;
margin-top: 50px;
background-color: white;
width: 20%;
padding: 15px 20px;
border-radius: 10px;
}
.quote:hover {
color: #D65A6A;
animation-name: btn-bounce;
animation-duration: 1.5s;
transition-timing-function: ease-in-out;
}
这只是一个部分的示例，因为我不想放入太多代码，但我在网站的多个部分也遇到了同样的问题。它在缩小时响应某个点，但当它达到某个点时，右侧的内容开始丢失。
提前致谢。
最佳答案
您已经在使用 bootstrap 3 框架来使该网站具有响应能力。所以尽量使用bootstrap类来构建布局。
引用自举网格系统:https://getbootstrap.com/docs/3.3/css/#grid
下面列出了几个问题:
关闭 meta 标签，因为引导类不工作
来自
<meta name="viewport" content="width=device-width, initial-scale=1"
到
<meta name="viewport" content="width=device-width, initial-scale=1">
在 CSS 中将 .about-container 属性更改为此。如果您想为较小的设备设置宽度，请使用媒体查询。
.about-container {
max-width: 80%;
margin: 0 auto;
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.about-container {
max-width: 100%;
margin: 0 auto;
padding: 15px;
}
}
在 HTML 中更改以下内容:
由此
<div class="about-container">
<div class="col a"></div>
<div class="col b">
<i class="fas fa-plane"></i>
<h3 class="about-h3">¿Lo quieres rápido?</h3>
<p class="about-p">Una virtud que destaca en mí es mi lealtad por mi trabajo. Me gusta ser rápida contestándote y entregándote la
grabación de tu proyecto.</p>
</div>
<div class="col c">
<i class="fas fa-trophy"></i>
<h3 class="about-h3">¿Quieres profesionalidad?</h3>
<p class="about-p">La rapidez no es suficiente si no mantienes una ética de trabajo completa. Cuando amas lo que haces los clientes lo
notan. ¡Echa un ojo a las opiniones de mis clientes!</p>
</div>
<div class="col d">
<i class="fas fa-dollar-sign"></i>
<h3 class="about-h3">¿Quieres un precio justo?</h3>
<p class="about-p">Dependiendo del tipo de proyecto que tengas, el precio y la entrega variarán, ¡pero siempre será un precio justo y
adaptado para ti!</p>
</div>
<div class="col e"></div>
</div>
为此
<div class="about-container">
<div class="col-xs-12 col-sm-4 col-md-4">
<i class="fas fa-plane"></i>
<h3 class="about-h3">¿Lo quieres rápido?</h3>
<p class="about-p">Una virtud que destaca en mí es mi lealtad por mi trabajo. Me gusta ser rápida contestándote y entregándote la
grabación de tu proyecto.</p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<i class="fas fa-trophy"></i>
<h3 class="about-h3">¿Quieres profesionalidad?</h3>
<p class="about-p">La rapidez no es suficiente si no mantienes una ética de trabajo completa. Cuando amas lo que haces los clientes lo
notan. ¡Echa un ojo a las opiniones de mis clientes!</p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<i class="fas fa-dollar-sign"></i>
<h3 class="about-h3">¿Quieres un precio justo?</h3>
<p class="about-p">Dependiendo del tipo de proyecto que tengas, el precio y la entrega variarán, ¡pero siempre será un precio justo y
adaptado para ti!</p>
</div>
</div>
关于html - 当我将窗口调整为小尺寸时，右边的内容被截断了。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53226191/