所以我有 3 个框,它们需要具有特定的高度和宽度,并将它们作为子元素设置在 bootstrap 中。在全景 View 中看起来不错:
但是,当窗口调整大小时,框向左移动而不是 float 在背景图形的中间。此外,标题文本(黄色)失去了它的上部填充:
认为“响应能力”正在接管,但无法确定它,我希望你们中的一些人能提供帮助。
我的 HTML 是:
<div class="container">
<div class="claimHead col-md-12">
<div class="submitHeader" style="margin-top: 60px; margin-bottom: 60px; margin-left: 30px;">
<h1 style="font-size: 36px;">Claim Submission Tool</h1>
<p style="font-size: 18px;">Filing claims has never been easier, it's a simple as 1, 2, 3</p>
</div>
<div id="stepsContainer">
<div class="col-md-4 stepsBox">
<div class="claimSteps" id="stepOne">
<p class="claimStepNumber">1</p>
<p class="claimStepTitle">step one</p>
<p class="claimStepText">Get started by entering your claim information in the fields below.</p>
</div>
</div>
<div class="col-md-4 stepsBox">
<div class="claimSteps" id="stepTwo">
<p class="claimStepNumber">2</p>
<p class="claimStepTitle">step two</p>
<p class="claimStepText">Next drag & drop or upload your documentation.</p>
</div>
</div>
<div class="col-md-4 stepsBox">
<div class="claimSteps" id="stepThree">
<p class="claimStepNumber">3</p>
<p class="claimStepTitle">step three</p>
<p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p>
</div>
</div>
</div>
</div>
</div>
我的 CSS 是:
#stepsContainer {
text-align: center;
}
.stepsBox {
padding-bottom: 60px;
}
.claimSteps {
padding-top: 40px;
width: 335px;
height: 285px;
background-color: #2dccd3;
color: #ffffff;
text-align: center;
}
.claimStepNumber {
font-size: 38px;
background-color: #ffffff;
color: #2dccd3;
width: 65px;
height: 65px;
border-radius: 50%;
margin-left: 135px;
}
.claimStepTitle {
color: #ffffff;
font-size: 18px;
}
.claimStepText {
text-align: center;
margin-left: 33.3%;
width: 33.3%;
}
关于我可以在这里做什么以及在哪里检查有什么想法吗?我也在这个 css 之上使用 Bootstrap 3,但我看不出它在哪里导致框向左对齐。
非常感谢。
最佳答案
默认情况下,列向左浮动,因为您在列内使用固定的高度/宽度 (.claimSteps
),它们别无选择,只能在中间列后左对齐崩溃,因为它们不能占据较小视口(viewport)的 100%。
标题对齐主要取决于您的 HTML 结构。
请注意,您应该考虑更改的一个区域是您正在创建的框的宽度。它太宽并且开始破裂/溢出,因为它是固定的。如果你可以减少它,你应该(我的例子反射(reflect)了这一点,但可以很容易地改回默认宽度。)
盒子的固定大小也在 400px 左右发挥作用。在第二个示例中,我使盒子变得灵活,因此它可以在所有视口(viewport)中正常工作。请参阅 400 像素以下视口(viewport)的示例 1 和 2。
以下是一些可能会有所帮助的示例。
示例 1:标准设置
.submitHeader {
margin: 60px 0;
}
.submitHeader h1 {
font-size: 36px;
}
.submitHeader p {
font-size: 18px;
}
.claimSteps {
width: 285px;
height: 285px;
background-color: #2dccd3;
color: #ffffff;
text-align: center;
position: relative;
margin: 0 auto;
display: table;
}
.claimStepNumber {
margin-top: 40px;
font-size: 38px;
background-color: #ffffff;
color: #2dccd3;
width: 55px;
height: 55px;
border-radius: 50%;
position: absolute;
display: table-cell;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.claimStepTitle {
color: #ffffff;
font-size: 18px;
margin-top: 110px;
}
.claimStepText {
text-align: center;
margin-left: 33.3%;
width: 33.3%;
}
@media (min-width: 1200px) {
.submitHeader {
margin: 60px 40px;
}
}
@media (max-width: 991px) {
.claimSteps {
margin: 30px auto;
}
.submitHeader {
margin-top: 60px;
margin-bottom: 0;
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="submitHeader">
<h1>Claim Submission Tool</h1>
<p>Filing claims has never been easier, it's a simple as 1, 2, 3</p>
</div>
<div class="row">
<div class="col-md-4">
<div class="claimSteps" id="stepOne">
<p class="claimStepNumber">1</p>
<p class="claimStepTitle">step one</p>
<p class="claimStepText">Get started by entering your claim information in the fields below.</p>
</div>
</div>
<div class="col-md-4">
<div class="claimSteps" id="stepTwo">
<p class="claimStepNumber">2</p>
<p class="claimStepTitle">step two</p>
<p class="claimStepText">Next drag and drop or upload your documentation.</p>
</div>
</div>
<div class="col-md-4">
<div class="claimSteps" id="stepThree">
<p class="claimStepNumber">3</p>
<p class="claimStepTitle">step three</p>
<p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p>
</div>
</div>
</div>
</div>
示例 2:移动优先设置
.submitHeader {
margin: 60px 0;
}
.submitHeader h1 {
font-size: 36px;
}
.submitHeader p {
font-size: 18px;
}
.claimSteps {
width: 285px;
height: 285px;
background-color: #2dccd3;
color: #ffffff;
text-align: center;
position: relative;
margin: 0 auto;
display: table;
}
.claimStepNumber {
margin-top: 40px;
font-size: 38px;
background-color: #ffffff;
color: #2dccd3;
width: 55px;
height: 55px;
border-radius: 50%;
position: absolute;
display: table-cell;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.claimStepTitle {
color: #ffffff;
font-size: 18px;
margin-top: 110px;
}
.claimStepText {
text-align: center;
margin-left: 33.3%;
width: 33.3%;
}
@media (min-width: 1200px) {
.submitHeader {
margin: 60px 40px;
}
}
@media (max-width: 991px) {
.claimSteps {
margin: 30px auto;
}
.submitHeader {
margin-top: 60px;
margin-bottom: 0;
text-align: center;
}
}
@media (max-width: 400px) {
/*Color For Demo Only*/
body {
background: red;
}
.claimSteps {
width: 100%;
height: 100%;
padding-bottom: 40px;
}
}
/*Color For Demo Only*/
@media (max-width: 320px) {
body {
background: lightblue;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="submitHeader">
<h1>Claim Submission Tool</h1>
<p>Filing claims has never been easier, it's a simple as 1, 2, 3</p>
</div>
<div class="row">
<div class="col-md-4">
<div class="claimSteps" id="stepOne">
<p class="claimStepNumber">1</p>
<p class="claimStepTitle">step one</p>
<p class="claimStepText">Get started by entering your claim information in the fields below.</p>
</div>
</div>
<div class="col-md-4">
<div class="claimSteps" id="stepTwo">
<p class="claimStepNumber">2</p>
<p class="claimStepTitle">step two</p>
<p class="claimStepText">Next drag and drop or upload your documentation.</p>
</div>
</div>
<div class="col-md-4">
<div class="claimSteps" id="stepThree">
<p class="claimStepNumber">3</p>
<p class="claimStepTitle">step three</p>
<p class="claimStepText">Now you're ready to submit your claim and await reimbursement.</p>
</div>
</div>
</div>
</div>
示例 3:文本对齐示例
.claimSteps {
width: 285px;
height: 285px;
background-color: #2dccd3;
color: #ffffff;
margin-top: 30px;
margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1>Claim Submission Tool</h1>
<p>Filing claims has never been easier, it's a simple as 1, 2, 3</p>
<div class="row">
<div id="stepsContainer">
<div class="col-md-4">
<div class="claimSteps"></div>
</div>
<div class="col-md-4">
<div class="claimSteps"></div>
</div>
<div class="col-md-4">
<div class="claimSteps"></div>
</div>
</div>
</div>
</div>
关于html - Bootstrap 网格中的容器正确响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33796956/