隐藏在'form-horizo​​ntal'形式内的提交按钮

Question

说我有下一个表格：

<form action="/orders/add" class="form-horizontal" id="OrderAddForm" method="post">
   <div style="display:none;"><input type="hidden" name="_method" value="POST"></div>         

   <div class="control-group">
      <button type="button" class="btn" id="new-order-line">New order line</button>
   </div>

   <div class="control-group">
      <input class="btn my-hidden" type="submit" value="Save Orderr">       
   </div>
</form>

我的css：

.my-hidden {
   display: none;
}

我的js：

$(function() {
   $('#new-order-line').click(function() {
     $('.my-hidden').show('slow');
   });
});

所以每当我点击“新订单行”按钮时，我想显示“保存订单”按钮，但似乎Twitter Bootstrap覆盖了我的'my-hidden'类，因为它位于'form'元素内部，而我的始终显示“保存订单”按钮。 我读过有些人有the same problem

隐藏我的按钮的一些解决方法？

Answer 1

我不认为这本身就是一个问题。它可能不是（轻松）使用Twitter Bootstrap CSS规则完成的，但如果问题是Twitter Bootstrap覆盖了您想要执行的操作，则始终可以使用更高specificity创建自己的规则。

一种简单的方法是添加到属性style="display: none;"，因为内联样式自动享有最高的特异性。

给你的班级更高的特异性的方法是详细阐述选择器。例如，这比你的例子具有更高的特异性，但我不知道它是否足够：

.form-horizontal .control-group .my-hidden { display: none; }

（我希望我能正确理解你的问题......如果没有，请指责我;）