Question

我想要两列并排，但我正在写作。它只是右侧，像这样：

Device name                            Description

Type                                   Time Zone

                                       Enable 

                                       Networking

我需要在同一行中启用和联网：

table screen shot

在制作表格的代码中，我无法并排显示div。

<div class="box-body">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Device Name</label>
              <input type="text" class="form-control" placeholder="Name" />
                     </div>
          <!-- /.form-group -->
          <div class="form-group">
            <label>Type</label>
           <select class="form-control select2" style="width: 100%;">
              <option selected="selected">Alabama</option>
              <option>Alaska</option>
              <option disabled="disabled">California (disabled)</option>
              <option>Delaware</option>
              <option>Tennessee</option>
              <option>Texas</option>
              <option>Washington</option>
            </select>
          </div>
          <!-- /.form-group -->
        </div>
        <!-- /.col -->
        <div class="col-md-6">
          <div class="form-group">
            <label>Description</label>
            <input type="text" class="form-control" placeholder="Name" />
          </div>
          <!-- /.form-group -->
          <div class="form-group">
            <label>Time Zone</label>
            <select class="form-control select2" style="width: 100%;">
              <option selected="selected">Alabama</option>
              <option>Alaska</option>t
              <option disabled="disabled">California (disabled)</option>
              <option>Delaware</option>
              <option>Tennessee</option>
              <option>Texas</option>
              <option>Washington</option>
            </select>
          </div>
             <div class="form-group">
            <label>Enable</label>
           <select class="form-control select2" style="width: 100%;">
              <option selected="selected">Alabama</option>
              <option>Alaska</option>
              <option disabled="disabled">California (disabled)</option>
              <option>Delaware</option>
              <option>Tennessee</option>
              <option>Texas</option>
              <option>Washington</option>
            </select>
          </div>
              <div class="form-group">
            <label>Networking</label>
            <select class="form-control select2" style="width: 100%;">
              <option>GPRS</option>
              <option>WI-FI</option>
               </select>
          </div>





          <!-- /.form-group -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>

期望的输出

Answer 1

您只需将Enable放在第一个col-md-6内。这是一个工作演示， http://www.bootply.com/NSqTJQciPQ

Answer 2

**Use this for you requirement**

    <div class="box-body">
   <div class="row">
      <div class="col-md-6">
         <div class="form-group">
            <label>Device Name</label>
            <input type="text" class="form-control" placeholder="Name">
         </div>
         <!-- /.form-group -->
         <div class="form-group">
            <label>Type</label>
            <select class="form-control select2" style="width: 100%;">
               <option selected="selected">Alabama</option>
               <option>Alaska</option>
               <option disabled="disabled">California (disabled)</option>
               <option>Delaware</option>
               <option>Tennessee</option>
               <option>Texas</option>
               <option>Washington</option>
            </select>
         </div>
         <!-- /.form-group -->
        <div class="form-group">
            <label>Enable</label>
            <select class="form-control select2" style="width: 100%;">
               <option selected="selected">Alabama</option>
               <option>Alaska</option>
               <option disabled="disabled">California (disabled)</option>
               <option>Delaware</option>
               <option>Tennessee</option>
               <option>Texas</option>
               <option>Washington</option>
            </select>
         </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
         <div class="form-group">
            <label>Description</label>
            <input type="text" class="form-control" placeholder="Name">
         </div>
         <!-- /.form-group -->
         <div class="form-group">
            <label>Time Zone</label>
            <select class="form-control select2" style="width: 100%;">
               <option selected="selected">Alabama</option>
               <option>Alaska</option>
               t
               <option disabled="disabled">California (disabled)</option>
               <option>Delaware</option>
               <option>Tennessee</option>
               <option>Texas</option>
               <option>Washington</option>
            </select>
         </div>

         <div class="form-group">
            <label>Networking</label>
            <select class="form-control select2" style="width: 100%;">
               <option>GPRS</option>
               <option>WI-FI</option>
            </select>
         </div>
         <!-- /.form-group -->
      </div>
      <!-- /.col -->
   </div>
   <!-- /.row -->
</div>

Answer 3

<div class="box-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Device Name</label>
<input type="text" class="form-control" placeholder="Name" />
</div>
<!-- /.form-group -->
<div class="form-group">
    <label>Type</label>
    <select class="form-control select2" style="width: 100%;">
        <option selected="selected">Alabama</option>
        <option>Alaska</option>
        <option disabled="disabled">California (disabled)</option>
        <option>Delaware</option>
        <option>Tennessee</option>
        <option>Texas</option>
        <option>Washington</option>
    </select>
</div>
<!-- /.form-group -->
<div class="form-group">
    <label>Enable</label>
    <select class="form-control select2" style="width: 100%;">
        <option selected="selected">Alabama</option>
        <option>Alaska</option>
        <option disabled="disabled">California (disabled)</option>
        <option>Delaware</option>
        <option>Tennessee</option>
        <option>Texas</option>
        <option>Washington</option>
    </select>
</div>        
</div>
<!-- /.col -->
<div class="col-md-6">
<div class="form-group">
    <label>Description</label>
    <input type="text" class="form-control" placeholder="Name" />
</div>
<!-- /.form-group -->
<div class="form-group">
<label>Time Zone</label>
<select class="form-control select2" style="width: 100%;">
    <option selected="selected">Alabama</option>
    <option>Alaska</option>t
    <option disabled="disabled">California (disabled)</option>
    <option>Delaware</option>
    <option>Tennessee</option>
    <option>Texas</option>
    <option>Washington</option>
</select>
</div>
<div class="form-group">
    <label>Networking</label>
    <select class="form-control select2" style="width: 100%;">
        <option>GPRS</option>
        <option>WI-FI</option>
    </select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>

在您的代码中，只需将“启用”选择框移至第一个col-md-6

即可

无法在引导程序中将列留在左侧

3 个答案: