在此表格中添加一列額外的列

Question

如何向使用的表格添加額外的列here？我正在嘗試實現類似this的操作，其中右側的信息與左側的表單一致。我嘗試在class = row的div下添加另一個div，然後將class = div的div浮動到左邊，但縮小了窗體的大小，我無法在不發送底下的文本的情況下恢復原始大小。下面反正 上市代碼：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3"> 
     <div class="well well-sm"> 
      <form class="form-horizontal" action="" method="post"> 
      <fieldset> 
      <legend class="text-center">Contact us</legend> 

      <!-- Name input--> 
      <div class="form-group"> 
       <label class="col-md-3 control-label" for="name">Name</label> 
       <div class="col-md-9"> 
       <input id="name" name="name" type="text" placeholder="Your name" class="form-control"> 
       </div> 
      </div> 

      <!-- Email input--> 
      <div class="form-group"> 
       <label class="col-md-3 control-label" for="email">Your E-mail</label> 
       <div class="col-md-9"> 
       <input id="email" name="email" type="text" placeholder="Your email" class="form-control"> 
       </div> 
      </div> 

      <!-- Message body --> 
      <div class="form-group"> 
       <label class="col-md-3 control-label" for="message">Your message</label> 
       <div class="col-md-9"> 
       <textarea class="form-control" id="message" name="message" placeholder="Please enter your message here..." rows="5"></textarea> 
       </div> 
      </div> 

      <!-- Form actions --> 
      <div class="form-group"> 
       <div class="col-md-12 text-right"> 
       <button type="submit" class="btn btn-primary btn-lg">Submit</button> 
       </div> 
      </div> 
      </fieldset> 
      </form> 
     </div> 
     </div> 
    </div> 
</div> 

Answer 1

您可以通過添加兩列，並添加您當前的代碼試試，在更大的規模列

<meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
<div class="well well-sm"> 
 
<div class="row"> 
 
    
 
    <div class="col-md-8"> 
 
    <div class="col-md-6 col-md-offset-3"> 
 
    
 
     <form class="form-horizontal" action="" method="post"> 
 
     <fieldset> 
 
     <legend class="text-center">Contact us</legend> 
 

 
     <!-- Name input--> 
 
     <div class="form-group"> 
 
      <label class="col-md-3 control-label" for="name">Name</label> 
 
      <div class="col-md-9"> 
 
      <input id="name" name="name" type="text" placeholder="Your name" class="form-control"> 
 
      </div> 
 
     </div> 
 

 
     <!-- Email input--> 
 
     <div class="form-group"> 
 
      <label class="col-md-3 control-label" for="email">Your E-mail</label> 
 
      <div class="col-md-9"> 
 
      <input id="email" name="email" type="text" placeholder="Your email" class="form-control"> 
 
      </div> 
 
     </div> 
 

 
     <!-- Message body --> 
 
     <div class="form-group"> 
 
      <label class="col-md-3 control-label" for="message">Your message</label> 
 
      <div class="col-md-9"> 
 
      <textarea class="form-control" id="message" name="message" placeholder="Please enter your message here..." rows="5"></textarea> 
 
      </div> 
 
     </div> 
 

 
     <!-- Form actions --> 
 
     <div class="form-group"> 
 
      <div class="col-md-12 text-right"> 
 
      <button type="submit" class="btn btn-primary btn-lg">Submit</button> 
 
      </div> 
 
     </div> 
 
     </fieldset> 
 
     </form> 
 
    </div> 
 
    
 
</div> 
 
<div class="col-md-4" style="padding:40px;"> 
 
    <div class="row"> 
 
<h4>Contact Details</h4> 
 

 
<p><span class="glyphicon glyphicon-envelope"></span> hello</p> 
 
<p><span class="glyphicon glyphicon-envelope"></span> hello</p> 
 

 
<p><span class="glyphicon glyphicon-envelope"></span> hello</p> 
 
    <p><span class="glyphicon glyphicon-envelope"></span> hello</p> 
 
    </div> 
 
    
 
    <div class="row"> 
 
<h4>Social</h4> 
 
<p>Logos</p> 
 
    </div> 
 

 
    <div class="row"> 
 
<h4>Project Opportunities</h4> 
 
<p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem Lorem Ipsum Lorem Ipsum</p> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>