このフォームに余分な列を追加

Question

使用するフォームに追加の列を追加する方法here？私はthisのようなものを達成しようとしています。ここには、左側にフォームの右側に情報があります。私はdiv = classの行のdivの下にdivを追加してみましたが、class = leftで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>

に、2つの列を追加し、あなたの現在のコードを追加して試みることができます