将边框添加到内联输入

Question

我在一行中有三个输入，我想只向第三个输入添加一个边框，就像一个框。我为第3个输入添加了一个类来调整边框但没有成功。

＆＃13;

＆＃13;

.valid-version {
  border: #0f7864;
  border-style: solid;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="inputName" class="col-lg-2 col-sm-1 control-label">product</label>
  <div class="col-md-2 col-sm-2">
    <input type="text" class="form-control" name="product">
  </div>
  <label for="inputName" class="col-lg-1 col-sm-1 control-label">version</label>
  <div class="col-md-1 col-sm-2">
    <input type="text" class="form-control" name="version">
  </div>

  <div class="valid-version">
    <label for="inputName" class="col-lg-1 col-sm-1 two-lines control-label">Valid</label>
    <div class="col-lg-2 col-sm-3">
      <select class="form-control">
        <option>yes</option>
        <option>no</option>
      </select>
    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

转到完整视图（为了让所有输入都在一行中）

Answer 1

在您的课程中添加select，因为您在select

的主要div中添加了css

＆＃13;

＆＃13;

.valid-version select{
  border: #0f7864;
  border-style: solid;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="inputName" class="col-lg-2 col-sm-1 control-label">product</label>
  <div class="col-md-2 col-sm-2">
    <input type="text" class="form-control" name="product">
  </div>
  <label for="inputName" class="col-lg-1 col-sm-1 control-label">version</label>
  <div class="col-md-1 col-sm-2">
    <input type="text" class="form-control" name="version">
  </div>

  <div class="valid-version">
    <label for="inputName" class="col-lg-1 col-sm-1 two-lines control-label">Valid</label>
    <div class="col-lg-2 col-sm-3">
      <select class="form-control">
        <option>yes</option>
        <option>no</option>
      </select>
    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在宽屏幕上，Bootstrap列变为浮动状态。因此，父块决定它是空的。它的高度变为零。

因此，您需要将overflow: hidden;属性添加到.valid-version类。此属性使父块采用考虑其浮动子项的维度。

＆＃13;

＆＃13;

.valid-version {
  border: #0f7864;
  border-style: solid;
  overflow: hidden;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="inputName" class="col-lg-2 col-sm-1 control-label">product</label>
  <div class="col-md-2 col-sm-2">
    <input type="text" class="form-control" name="product">
  </div>
  <label for="inputName" class="col-lg-1 col-sm-1 control-label">version</label>
  <div class="col-md-1 col-sm-2">
    <input type="text" class="form-control" name="version">
  </div>

  <div class="valid-version">
    <label for="inputName" class="col-lg-1 col-sm-1 two-lines control-label">Valid</label>
    <div class="col-lg-2 col-sm-3">
      <select class="form-control">
        <option>yes</option>
        <option>no</option>
      </select>
    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;