Question

我正在使用下面的约定构建一个包含许多表单元素的屏幕;它使我免于将class='...'添加到每个输入，按钮和选择框。

.formDiv button {
  font-family: verdana;
  font-size: 10px;
  border: 1px solid #999;
  border-radius:3px;
}

.formDiv input {
  font-family: verdana;
  border: 1px solid #999;
  width: 110px;
}

现在我想使用bootstrap;我已经完成了所有配置;确认它正在运作。是否可以在不向每个表单元素添加class='some-bs-style'的情况下应用bootstrap3样式？理想情况下，我想做这样的事情：

.myDiv input {
   //use bs3 input styling
}

.myDiv select {
   //use bs3 select styling
}

我看到bootstrap使用form-control，所以我尝试使用以下方法在父div上设置：

<div id='#formdiv' class='form-control'>

..但它不起作用;我吮吸css，所以不出意外。

Answer 1

从表单控件复制规则，然后将规则应用于输入，并选择是否要自动将其用于 formdiv 类：

.formdiv input, select {
RULES FROM FORM CONTROL
}

DEMO HERE

更新了DEMO + CSS就在这里：http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css

复制是必要的，因为您无法从其他类继承规则。因此，如果您想避免将表单控件样式应用于每个输入并选择，则必须使用上述方法。但这仍然比在每种形式的每个输入中加入“表单控制”更快。

将bootstrap表单样式应用于div元素而不更改类

1 个答案: