Question

如何在使用here的表单中添加额外的列？我正在努力实现像this这样的东西，右边有信息，左边是表格。我尝试在div下使用class = row添加另一个div并使用class = well 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

您可以尝试添加两列，并在更大的缩放列中添加当前代码

＆＃13;

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

＆＃13;

在此表单中添加一个额外的列

1 个答案: