Question

我有一个输入字段，我想使用bootstrap alert css class。问题是我无法让它工作，因为bootstrap还定义了更具体的选择器input[type="text"]。那么，是吗？我可以忘记在输入元素上使用那个alert css类吗？我真的想避免为输入字段创建更具体的css规则......

Answer 1

你不必“忘记”，但你必须触摸一点CSS（或实际上很少）。

您可以使用LESS mixins完成大部分工作：

input.myInputAlert {    
  .alert;
}

大致给出以下

input.myInputAlert {
  /* padding: 8px 35px 8px 14px; */
  /* margin-bottom: 20px; */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #c09853;
}

我删除了填充和边距规则，让它使用真实的input值。

如果没有多少测试，它看起来确实有效：http://jsbin.com/oqoqeg/2

您可以看到LESS正在编译there (lesscss.org)

输入字段的bootstrap css

1 个答案: