在引导 css 中设置的嵌套类属性答案

【问题标题】：Nested class property set in bootsrap css在引导 css 中设置的嵌套类属性
【发布时间】：2014-09-15 01:46:11
【问题描述】：

我的代码块看起来像这样

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

现在我想仅为 .form-group > col-sm-10 > form-control 的块设置表单控制类宽度 30 %。谢谢

【问题讨论】：

喜欢那个演示？？？ - bootply.com/nqpaEbKX5R
谢谢@MaryMelody，但如果我只使用没有块序列，会有应用30% 宽度。但是那个地方不需要设置宽度。宽度只会为块序列设置 .form-group > col-sm-10 > form-control.
请试试这个演示 - bootply.com/QV0WYYIDTj
@MaryMelody，这行得通。
也许，你只是忘了在类名.form-group > ?col-sm-10 > ?form-control之前添加.，它应该是这样的-.form-group > .col-sm-10 > .form-control

标签： css twitter-bootstrap-3

【解决方案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>

【讨论】：

【解决方案2】：

你可以这样做：

引导层 - 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%;
    }
}

【讨论】：