インライン入力にボーダーを追加する

Question

私は1行に3つの入力があり、3番目の入力にはボックスのようにボーダーを追加したいと思います。 3番目の入力用のクラスを追加して、境界線を調整しません。

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

フルビューに移動します（1行ですべての入力を有するために）

Answer 1

ワイド画面では、ブートストラップ列がフローティングになります。このため、親ブロックは空であると判断します。そしてその高さはゼロになる。

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>

Answer 2

あなたは

選択のメインのdivにCSSを追加しましたので、あなたのクラスで selectを追加します。

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