Question

我正在尝试使用该引导模型：

但是对象效果不佳，因为有一个下拉列表（它不是所有相同类型的元素）。这就是我的意思：

这是我的小提琴：

<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-xs-4">
                <div class="row">
                    <div class="form-group">
                        <label class="col-xs-3 control label">Prefix:</label><br />
                        <div class="col-xs-5 selectContainer">
                            <select name="prefix" class="form-control">
                                <option value="Mr">Mr</option>
                                <option value="Miss">Miss</option>
                                <option value="Ms">Ms</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <label for="fname">First Name:</label>
                    <input type="text" class="form-control" id="fname" name="fname">
                </div>
            </div>
            <div class="col-xs-4">  
                <div class="row">   
                    <div class="form-group">
                        <label for="lname">Last Name:</label>
                        <input type="text" class="form-control" id="lname" name="lname">
                    </div>
                </div>
                <div class="row">
                    <label for="suffix">Suffix:</label>
                    <input type="text" class="form-control" id="suffix" name="suffix">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="form-group">
                    <label for="info">Information:</label>
                    <textarea class="form-control" rows="4" id="info" name="info"></textarea>
                </div>
            </div>
        </div>  
    </div>
</body>
</html>

如何修复此对齐问题？

Answer 1

尝试这样的事情：http://www.bootply.com/TvgQizWRZw

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-6">
           <label for="prefix">Prefix</label>
           <select name="prefix" class="form-control" id="prefix">
             <option value="Mr">Mr</option>
             <option value="Miss">Miss</option>
             <option value="Ms">Ms</option>
           </select>
        </div>
        <div class="col-md-6">
          <label for="tbLastName">Last name</label>
          <input type="text" class="form-control" id="tbLastName">
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <label for="tbFirstName">First Name</label>
          <input type="text" class="form-control" id="tbFirstName">
        </div>
        <div class="col-md-6">
          <label for="tbSuffix">Suffix</label>
          <input type="text" class="form-control" id="tbSuffix">
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <label for="tbInfo">Information</label>
      <textarea rows="4" cols="50" class="form-control" id="tbInfo">Test</textarea>
    </div>
  </div>
</div>

合并不同元素的div

1 个答案: