Fügen Sie diesem Formular eine zusätzliche Spalte hinzu

Question

Wie füge ich dem Formular here eine zusätzliche Spalte hinzu? Ich versuche, etwas wie this zu erreichen, wo rechts mit dem Formular auf der linken Seite Informationen sind. Ich habe versucht, ein anderes div unter dem div mit class = row hinzuzufügen und das div mit class = well left zu schweben, aber es hat das Formular geschrumpft und ich konnte es nicht dazu bringen, zu seiner ursprünglichen Größe zurückzukehren, ohne den Text darunter zu senden. Listing Code unten sowieso:

<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

Sie könnten versuchen, durch zwei Spalten hinzufügen, und geben Sie Ihren aktuellen Code, in der größeren skaliert Spalte

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