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

Question

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

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

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

我的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，但是我没有看到它导致盒子向右移动的位置。

非常感谢。

Answer 1

在class="row"之后使用class="col-**-**"之前，您应该先添加class="container"。

Answer 2

默认情况下，列会浮动到左侧，因为您在列（.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;
  }
}

<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>

Answer 3

您是否尝试将col-md-12与这三个stepBox分开？

我认为没有必要将这些列包装在第一列中，所以我宁愿在col-md-12开始之前结束#stepsContainer。

另一件事是，显然你的CSS将claimSteps的宽度限制为小于 md 断点发生时的屏幕宽度。您应该至少在这一点使用媒体查询更改CSS中的width属性。

@media (max-width: 1199px)
{
   .claimSteps { width: 100%; }
}

应该这样做。

Answer 4

默认div显示为块，所以向左浮动，如果要将其设置为浮动到中间，则必须设置显示 内联阻止并将容器文字对齐设置为中心

在您的情况下，您可以将内联块显示添加到.claimSteps CSS规则

.claimSteps {
    padding-top: 40px;
    width: 335px;
    height: 285px;
    background-color: #2dccd3;
    color: #ffffff;
    text-align: center;
    display: inline-block;
}

对于标题，您可以在div.submitHeader

中使用填充而不是边距

请参阅代码段以获取完整结果

＆＃13;

＆＃13;

#stepsContainer {
  text-align: center;
}

.stepsBox {
  padding-bottom: 60px;
}

.claimSteps {
  padding-top: 40px;
  width: 335px;
  height: 285px;
  background-color: #2dccd3;
  color: #ffffff;
  text-align: center;
  display: inline-block;
}

.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%;
}

＆＃13;

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="claimHead col-md-12">
    <div class="submitHeader" style="padding-top: 60px; padding-bottom: 60px; padding-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>

＆＃13;

＆＃13;

＆＃13;