所以我有3个盒子需要具有特定的高度和宽度,并将它们设置在bootstrap中作为子元素.在全视图中看起来很好:
但是,当窗口调整大小时,框会向左移动而不是浮动在背景图形的中间.此外,标题文本(黄色)丢失其上填充:
认为“响应性”正在接管,但无法确定它,我希望你们中的一些人可以提供帮助.
我的HTML是这些:
Box">
Box">
Box">
我的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),它们别无选择,只能在介质列折叠后向左对齐,因为它们不能占用100%的较小的列视.
标题对齐主要取决于您的HTML结构.
请注意,您应该考虑更改的一个区域是您正在创建的框的宽度.它太宽并且开始断开/溢出因为它已修复.如果你可以减少它,你应该(我的例子反映了这一点,但可以很容易地改回你的默认宽度.)
盒子的固定尺寸也在400px左右发挥作用.在第二个例子中,我使盒子变得灵活,因此它可以在所有视口中正常工作.请参阅400px下视口的示例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;
}
}
示例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;
}
}
示例3:文本对齐示例
.claimSteps {
width: 285px;
height: 285px;
background-color: #2dccd3;
color: #ffffff;
margin-top: 30px;
margin-bottom: 30px;
}