Bootstrap列无缘无故偏移

时间：2015-12-15 14:46:04

标签： html css twitter-bootstrap

我一直在自行车手风琴折叠中编写一个表格，但md和lg屏幕上有一个列有问题。

正如xs和sm所预期的那样，它看起来像是这样：

xs and sm screens

完全按照预期，然而当我上升到md和lg时，会发生这种情况：

md and lg screens

我已经尝试过检查元素等等，但是一切都如我所料，应该是完美的，在这里你可以看到父母的宽度，然后是每个孩子的宽度：

父母：

The parent row

每个孩子：

Each child

正如你所看到的，每个孩子确实是父母的50％，因此，没有理由进入一条新线，也没有理由抵消50％。

我看了我能想到的一切：

  • 我是否意外添加了偏移类？否。
  • 是否有隐藏的col-md-6正在进行抵消？否。
  • 孩子是否大于50％？否。

所以现在我迷失了并且想要了解。

以下是受影响表单的代码段：

＆＃13;
＆＃13; 
.payment-bottom-container {
  background: white;
  color: #C99C49;
}
.payment-bottom-container .section-intro-title {
  color: #C99C49;
  text-align: center;
  font-size: 36px;
  padding-top: 20px;
  text-transform: uppercase;
}
.payment-bottom-container .section-intro-title::after {
  border-color: #C99C49;
  max-width: 40px;
  left: 125px;
}
.payment-bottom-container .final-step-text {
  color: #C99C49;
  text-align: center;
  margin: 0 auto;
  max-width: 700px;
  width: 100%;
  font-family: "montserrat-regular";
  font-weight: bold;
  letter-spacing: 0.2em;
  font-size: 16px;
  padding: 0 10px 10px 10px;
  text-transform: uppercase;
}
.payment-bottom-container .panel-group .panel .panel-heading {
  background: #f1f1f1;
  border-top: 2px solid #ccc;
  border-radius: 0;
}
.payment-bottom-container .panel-group .panel .panel-heading h4 a {
  color: #190e8c;
  font-family: "Museo500";
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input,
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 select {
  width: 100%;
  margin-bottom: 10px;
  outline: 0;
  padding: 5px;
  font-family: "Raleway";
  font-weight: bold;
  color: #190e8c;
  letter-spacing: 0.1em;
  font-size: 12px;
}
.payment-bottom-container .panel-group .panel .panel-body form .container {
  max-width: 100%;
}
.payment-bottom-container .panel-group .panel .panel-body form .delivery-title {
  color: black;
  font-family: 'Raleway';
  font-size: 24px;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input.input-50 {
  width: 50%;
}
@media (max-width: 991px) {
  .payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input.input-50 {
    width: 100%;
  }
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 input[type="submit"] {
  background-color: #C99C49;
  color: white;
  font-family: 'Raeleway';
  text-align: center;
  font-size: 16px;
  border: 0;
  outline: 0;
  text-transform: uppercase;
  padding: 10px;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 label {
  display: block;
  color: #063c58;
  font-family: 'Raeleway';
  text-transform: uppercase;
}
.payment-bottom-container .panel-group .panel .panel-body form .col-xs-12 label span {
  color: red;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="payment-bottom-container">
        <h1 class="section-intro-title">The final step</h1>
        <p class="final-step-text">Just let us know where you would like us to deliver your case to and it will be on its way!</p>
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Enter Delivery Address
        </a>
      </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                <form action="#" method="post">
                  <div class="container">
                    <div class="row">
                      <div class="col-xs-12">
                        <h1 class="delivery-title">Where should we ship?</h1>
                      </div>
                      <div class="col-xs-12 col-md-6">
                        <label>First Name<span>*</span>
                        </label>
                        <input type="text" placeholder="First Name" required>
                      </div>
                      <div class="col-xs-12 col-md-6">
                        <label>Last Name<span>*</span>
                        </label>
                        <input type="text" placeholder="Last Name" required>
                      </div>
                      <div class="col-xs-12 col-md-6">
                        <label>Address Line 1<span>*</span>
                        </label>
                        <input type="text" placeholder="Address Line 1" required>
                      </div>
                      <div class="col-xs-12 col-md-6">
                        <label>Address Line 2</label>
                        <input type="text" placeholder="Address Line 2">
                      </div>
                      <div class="col-xs-12 col-md-6">
                        <label>Phone Number<span>*</span>
                        </label>
                        <input type="tel" placeholder="Phone">
                      </div>
                      <div class="col-xs-12 col-md-6">
                        <label>City/Town<span>*</span>
                        </label>
                        <input type="text" placeholder="City" required>
                      </div>
                      <div class="col-xs-12 col-md-6">
                        <label>Region/Council Area<span>*</span>
                        </label>
                        <input type="text" placeholder="Region" required>
                      </div>
                      <div class="col-xs-12 col-md-6">
                        <label>Post Code<span>*</span>
                        </label>
                        <input type="text" placeholder="Post Code" required>
                      </div>
                      <div class="col-xs-12 col-md-6">
                        <label>Select your country<span>*</span>
                        </label>
                        <select required>
                          <option value="UK">United Kingdom (GB)</option>
                        </select>
                      </div>
                      <div class="col-xs-12">
                        <h1 class="delivery-title">Confirm Your Login Details</h1>
                      </div>
                      <div class="col-xs-12">
                        <label>Email<span>*</span>
                        </label>
                        <input type="email" placeholder="The same as setup above" class="input-50" required>
                      </div>
                      <div class="col-xs-12">
                        <label>Password<span>*</span>
                        </label>
                        <input type="password" placeholder="The same as setup above" class="input-50" required>
                      </div>
                      <div class="col-xs-12">
                        <input type="submit" value="Complete order">
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我希望一切都清楚，如果没有，请在下面发表评论，我可以提供您可能需要的任何其他信息。

1 个答案:

答案 0 :(得分：0)

@andrewbone（https://stackoverflow.com/users/4891666/andrew-bone）在评论答案中找到了答案。

问题是我在地址第2行上方没有星号，它是1px太短，因此我将它们全部设置为最小高度为72px，并将添加线2从71px提高到72px高固定问题！

向安德鲁大喊，发现这是个问题！

相关问题
最新问题