Как можно выровнять центр бутстрапа этой формулировки?

Question

У меня есть этот пример:

link

КОД HTML:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6 box1"> 
      <div class="row"> 
        <div class="col-md-6"> 
          <label for="firstname">First Name<span id="star">*</span></label> 
          <input type="text" name="firstname" id="firstname" placeholder="John"> 
        </div> 
      </div> 

      <div class="row"> 
        <div class="col-md-6"> 
          <label for="firstname">First Name<span id="star">*</span></label> 
          <input type="text" name="firstname" id="firstname" placeholder="John"> 
        </div> 
      </div> 


      <div class="row"> 
        <div class="col-md-6"> 
          <label for="firstname">First Name<span id="star">*</span></label> 
          <input type="text" name="firstname" id="firstname" placeholder="John"> 
        </div> 
      </div> 



     </div> 
     <div class="col-md-6 box2">sss</div> 

    </div> 
</div> 

КОД CSS:

.box1{ 
    background:red; 
    } 
.box2{ 

    background:aqua; 
    } 

Слева есть три формы, и я хочу эти формы должны быть согласованы с center ... Что еще нужно сделать с помощью бутстрапа?

Заранее благодарен!

Answer 1

Удалите вложенный col-md-6, так как он регулирует ширину до 50% и не поможет центрировать содержимое. Добавить класс text-center в родительский контейнер.

.box1 { 
 
    background: red; 
 
} 
 
.box2 { 
 
    background: aqua; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-6 box1 text-center"> 
 
     <div class="row"> 
 

 
     <label for="firstname">First Name<span id="star">*</span> 
 
     </label> 
 
     <input name="firstname" id="firstname" placeholder="John" type="text"> 
 

 
     </div> 
 

 
     <div class="row"> 
 

 
     <label for="firstname">First Name<span id="star">*</span> 
 
     </label> 
 
     <input name="firstname" id="firstname" placeholder="John" type="text"> 
 

 
     </div> 
 

 

 
     <div class="row"> 
 

 
     <label for="firstname">First Name<span id="star">*</span> 
 
     </label> 
 
     <input name="firstname" id="firstname" placeholder="John" type="text"> 
 

 
     </div> 
 

 

 

 
    </div> 
 
    <div class="col-md-6 box2">sss</div> 
 

 
    </div> 
 
</div>

Answer 2

Попробуйте это:

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-md-6 box1 col-md-offset-3"> 
     <div class="row"> 
       <div class="col-md-6"> 
         <label for="firstname">First Name<span id="star">*</span></label> 
         <input type="text" name="firstname" id="firstname" placeholder="John"> 
       </div> 
     </div> 

     <div class="row"> 
       <div class="col-md-6"> 
         <label for="firstname">First Name<span id="star">*</span></label> 
         <input type="text" name="firstname" id="firstname" placeholder="John"> 
       </div> 
     </div> 


     <div class="row"> 
       <div class="col-md-6"> 
         <label for="firstname">First Name<span id="star">*</span></label> 
         <input type="text" name="firstname" id="firstname" placeholder="John"> 
       </div> 
     </div> 



    </div> 
    <div class="col-md-6 box2 col-md-offset-3">sss</div> 

</div>