Question

我正在尝试使用bootstrap创建一个2列的联系表单，但是我的某些<div class="form-group">没有按计划进行，我遇到了这种困难。

我想要的输出应该是：

first name                         message
textbox                            textbox

last name                          submit button
textbox

email
textbox

contactno
textbox

这是我的代码。我现在的输出是它们都在左侧，消息的文本框很小。

<div class="col-sm-5 col-sm-offset-1">
 <div class="form-group">
    <label for="fname">Name *</label>
    <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name" required>
 </div>
 <div class="form-group">
    <label for="lname">Last Name</label> 
    <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter Last Name" required>                 
  </div>
 <div class="form-group">
    <label for="email">Email</label>                    
    <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" required>
  </div>
  <div class="form-group">
    <label for="contactno">Contact No.</label>
    <input type="contactno" class="form-control" id="contactno" name="contactno" placeholder="Enter Contact No." required>               
   </div>

   <div class="col-sm-5">
   <div class="form-group">
   <label for="message">Message</label>
   <textarea name="message" id="message" class="form-control" rows="5" required></textarea>             
    </div>  
    <div class="form-group">                
    <button type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right" required="required">Submit Message</button>
    </div>
    </div>
    </div>

Answer 1

您目前已将第二列嵌套在第一列中，将它们分开，您应该看到所需的结果。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-sm-6">

      <div class="form-group">
        <label for="fname">Name *</label>
        <input type="text" class="form-control" name="fname" id="fname" placeholder="Enter First Name" required>
      </div>
      <div class="form-group">
        <label for="lname">Last Name</label>
        <input type="text" class="form-control" name="lname" id="lname" placeholder="Enter Last Name" required>
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" required>
      </div>
      <div class="form-group">
        <label for="contactno">Contact No.</label>
        <input type="contactno" class="form-control" id="contactno" name="contactno" placeholder="Enter Contact No." required>
      </div>

    </div>

    <div class="col-sm-6">

      <div class="form-group">
        <label for="message">Message</label>
        <textarea name="message" id="message" class="form-control" rows="5" required></textarea>
      </div>
      <div class="form-group">
        <button type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right" required="required">Submit Message</button>
      </div>

    </div>

  </div>
</div>

Bootstrap多列表单

1 个答案: