Сопоставление столбцов бутстрапа без причины

Question

Я кодировал форму внутри обтекания аккордеона бутстрапа, но есть проблема на экранах md и lg с колонками.

Как и ожидалось, на хз и см, это выглядит так:

Прекрасно, как и следовало ожидать, однако, когда я подхожу к мд и Л.Г., это происходит:

Я попытался проверить элемент и т. Д., Но все так, как я ожидал, и должно работать идеально, здесь вы можете увидеть ширину родителей, а затем ширину каждого ребенка:

Родитель:

Каждый ребенок:

Как вы можете видеть, каждый ребенок на самом деле 50% от родителей, таким образом, нет никаких оснований для этого перейдя на новую линию, или для компенсации на 50%.

У меня есть взгляд на все, что я могу думать:

• ли я случайно добавить класс смещения? №
• Есть ли скрытый col-md-6, который выполняет офсет? №
• Является ли ребенок более 50%? №

Итак, теперь я потерялся и попрошу идеи.

Вот фрагмент кода пораженного формы:

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

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

Я надеюсь, что все достаточно понятно, если нет, то комментарий ниже, и я могу предоставить любую другую информацию, вам может понадобиться.

Answer 1

Ответ на этот вопрос был найден по адресу @andrewbone (https://stackoverflow.com/users/4891666/andrew-bone) в ответе на комментарий.

Проблема заключалась в том, что у меня отсутствовала звездочка над адресной строкой 2, она была слишком короткой, поэтому я установил для всех их минимальную высоту 72 пикселя и увеличил линию добавления 2 от 71px до 72px высокой фиксации проблема!

Крик к andrew для того, чтобы найти, что было проблемой!