为内联输入添加边框答案

【问题标题】：Add border to an inline input为内联输入添加边框
【发布时间】：2016-11-03 20:20:59
【问题描述】：

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

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

<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>

转到全视图（以便将所有输入放在一行中）

【问题讨论】：

标签： html css twitter-bootstrap-3 forms

【解决方案1】：

在你的类中添加select，因为你在select的主div中添加了css

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

<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>

【讨论】：

我还想要标题valid 在同一边框内。

【解决方案2】：

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

因此您需要将overflow: hidden; 属性添加到.valid-version 类。此属性导致父块采用考虑其浮动子级的尺寸。

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

<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>

【讨论】：