html – 引导网格中的容器正确响应？

所以我有3个盒子需要具有特定的高度和宽度,并将它们设置在bootstrap中作为子元素.在全视图中看起来很好：

但是,当窗口调整大小时,框会向左移动而不是浮动在背景图形的中间.此外,标题文本(黄色)丢失其上填充：

认为“响应性”正在接管,但无法确定它,我希望你们中的一些人可以提供帮助.

我的HTML是这些：

aimHead col-md-12">
        
ottom: 60px; margin-left: 30px;">
            
aim Submission Toolims has never been easier,it's a simple as 1,2,3Box">
                
imsteps" id="stepOne">
                    
imstepNumber">1imstepTitle">step oneimstepText">Get started by entering your claim information in the fields below.Box">
                
imsteps" id="stepTwo">
                    
imstepNumber">2imstepTitle">step twoimstepText">Next drag & drop or upload your documentation.Box">
                
imsteps" id="stepThree">
                    
imstepNumber">3imstepTitle">step threeimstepText">Now you're ready to submit your claim and await reimbursement.

我的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;
  }
}

aim Submission Toolims has never been easier,3imsteps" id="stepOne">
        
imstepNumber">1imstepTitle">step oneimstepText">Get started by entering your claim information in the fields below.imsteps" id="stepTwo">
        
imstepNumber">2imstepTitle">step twoimstepText">Next drag and drop or upload your documentation.imsteps" id="stepThree">
        
imstepNumber">3imstepTitle">step threeimstepText">Now you're ready to submit your claim and await reimbursement.

示例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;
  }
}

aim Submission Toolims has never been easier,3imsteps" id="stepOne">
        
imstepNumber">1imstepTitle">step oneimstepText">Get started by entering your claim information in the fields below.imsteps" id="stepTwo">
        
imstepNumber">2imstepTitle">step twoimstepText">Next drag and drop or upload your documentation.imsteps" id="stepThree">
        
imstepNumber">3imstepTitle">step threeimstepText">Now you're ready to submit your claim and await reimbursement.

示例3：文本对齐示例

.claimsteps {
  width: 285px;
  height: 285px;
  background-color: #2dccd3;
  color: #ffffff;
  margin-top: 30px;
  margin-bottom: 30px;
}

aim Submission Toolims has never been easier,3imsteps">imsteps">imsteps">