Question

我很擅长编码，只是在熟悉html / css / bootstrap。我的＆＃34; jumbotron＆＃34;中的

元素当我改变屏幕的大小时，类没有正确调整大小（它们全部堆叠在一起）。请在此处查看：http://www.bohmerconstruction.com/test.html/。如果您将屏幕调整到较低的宽度，您将看到

元素的作用。这也是它在移动设备上显示的方式。

这是html：

<div class="jumbotron">
<div class="container">
  <h1>Let us help you</h1>
    <p><a href="http://www.bohmerconstruction.com/contact-bohmer-construction.html">Contact us for your free estimate</a></p>
</div>
</div>

这是CSS：

.jumbotron {
background-image: url('http://constructotal.net/wp-content/uploads/2013/03/ist2_5357604-construction-background-1024x680.jpg');
background-size: cover;
height: 100%;
}


.jumbotron h1 {
color: white;
margin-top: 95px;
float: left;
height: 100%;

}

.jumbotron p {
font-size:18px;
margin-top: 180px;
margin-right: 480px;
height:100%;

}


.jumbotron a {
color: #297ACC;
}

感谢您的任何建议！

Answer 1

看起来您正在尝试对齐文本。保证金权利正在伤害到你。但是，让我们摆脱那个浮动，这样你就不必在 p 元素上设置上限。

替换这些声明

.jumbotron p {
    font-size: 18px;
    text-align: left;
}

和

.jumbotron h1 {
    color: white;
    margin-top: 95px;
    text-align: left;
}

如何在＆＃34; jumbotron＆＃34;内进行<p>响应

1 个答案: