Question

我想将<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <form class="form-inline"> <div class="form-group"> <select class="selectpicker form-control"> <option>Option #1</option> <option>Option #2</option> <option>Option #3</option> </select> </div> <div class="form-group"> <select class="selectpicker form-control"> <option>Option #1</option> <option>Option #2</option> <option>Option #3</option> </select> </div> <button type="submit" class="btn btn-info">Send</button> </form>设置为Full page mode元素，但它与其内容的高度不匹配，看起来很难看。

这是一个演示：

syms q1 q2
c = cos(q2 - q1);
c % variable c is saved as cos(q1 - q2) instead of cos(q2 - q1)

cos(q2-q1)

修改：在q1中运行。

Answer 1

将height:auto;设为.form-control

Answer 2

float:left个子元素和height的固定bootstrap-select导致此问题。

代码段

/* My styles */

.form-group {
  border-right: 1px solid #2e2e2e;
  padding: 0 10px;
}
.bootstrap-select.btn-group .dropdown-toggle {
  padding: 15px 40px 15px 0;
}
.mycustomform {} .mycustomform .btn-group {
  height: auto;
}
.mycustomform .form-group::before,
.mycustomform .btn-group::before {
  content: "";
  display: table;
}
.mycustomform {} .mycustomform .form-group::after,
.mycustomform .btn-group::after {
  content: "";
  display: table;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline mycustomform">
  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>

  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>
  <button type="submit" class="btn btn-info">Send</button>
</form>

Answer 3

使用以下代码，希望它能正常工作

＆＃13;

.form-group{
	border-right:1px solid #000;
	padding-right:5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>

  <div class="form-group">
    <select class="selectpicker form-control">
      <option>Option #1</option>
      <option>Option #2</option>
      <option>Option #3</option>
    </select>
  </div>
  <button type="submit" class="btn btn-info">Send</button>
</form>

＆＃13;

以大屏幕观看

Answer 4

设置margin-bottom：15px;对于div里面的.form-group

Answer 5

不确定这是否会对任何人有所帮助，但我遇到了.form-group类不希望拥有动态高度的问题。将height: auto添加到.form-group将解决此问题。

.form-group使元素的高度在里面

5 个答案:

代码段