需要一個修復引導形式

Question

我想創建一個引導的形式，我試圖填充兩列中的同一行中的兩個字段和另一行中的第三個字段與上面的行相同的寬度。但是一些第三場如何不佔據整個行寬，如上述領域。

<div class="container"> 
<h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2> 
<br> 
<form> 
<div class="row"> 
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-7"> 
    <div class="row"> 
     <div class="col-lg-1 col-md-2 col-sm-3 col-xs-3"> 
     <label>Name</label> 
     </div> 
     <div class="col-lg-11 col-md-10 col-sm-9 col-xs-9"> 
     <input type="text"> 
     </div> 
    </div> 
    </div> 

    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-5"> 
    <div class="row"> 
     <div class="col-lg-2 col-md-3 col-sm-3 col-xs-3"> 
     <label>Phone</label> 
     </div> 
     <div class="col-lg-10 col-md-9 col-sm-9 col-xs-9"> 
     <input type="text"> 
     </div> 
    </div> 
    </div> 
</div> 
<br> 
<div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
    <div class="row"> 
     <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4"> 
     <label>Email</label> 
     </div> 
     <div class="col-lg-11 col-md-10 col-sm-9 col-xs-8"> 
     <input type="email"> 
     </div> 
    </div> 
    </div> 
</div> 

這是我jsfiddle 我想顯示在同一行，其中電子郵件以佔據整個行下面的姓名和電話領域的姓名和電話領域。但電子郵件字段沒有佔用整行。

Answer 1

我想你正在嘗試這樣做。

@media (min-width: 767px) { 
 
    #soForm .soForm { 
 
    margin: 10px auto; 
 
    } 
 
    #soForm .control-label { 
 
    margin-top: 10px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2> 
 

 
    </br> 
 
    <form id="soForm" name="soForm"> 
 
    <div class="form-group"> 
 
     <label for="name" class="col-sm-2 control-label">Name</label> 
 
     <div class="col-sm-4 soForm"> 
 
     <input type="text" class="form-control" id="name" /> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="phone" class="col-sm-2 control-label">Phone</label> 
 
     <div class="col-sm-4 soForm"> 
 
     <input type="text" class="form-control" id="phone" /> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="email" class="col-sm-2 control-label">Email</label> 
 
     <div class="col-sm-10"> 
 
     <input type="text" class="form-control" id="email" /> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>