在bootstrap css中设置嵌套的类属性

Question

我的代码块看起来像这样

<div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
 </div>

现在我想为此块设置表单控件类宽度30％，其中.form-group＆gt; col-sm-10＆gt;形式控制。感谢

Answer 1

如果您希望仅为此代码块将宽度设置为30％，则可以尝试在线编码。

<div class="form-group">
   <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
   <input type="password" style="width:30%" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>

Answer 2

你可以这样做：

Bootply - DEMO

<强> HTML：

<div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="width = 30%">
    </div>
</div>

<强> CSS：

@media (min-width: 768px){
    .form-group > .col-sm-10 > .form-control {
        width: 30%;
    }
}