cachée soumettre bouton à l'intérieur sous forme de 'forme horizontale'

Question

Dire que j'ai la forme suivante:

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

Et mon css:

.my-hidden { 
    display: none; 
} 

Et mes js:

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

Alors Je veux afficher le bouton 'Enregistrer la commande' chaque fois que je clique sur le bouton 'Nouvelle ligne de commande', mais il semble que Twitter Bootstrap écrase ma classe 'my-hidden' parce que à l'intérieur d'un élément 'form' et mon bouton 'Save Order' est toujours affiché. J'ai lu que certaines personnes ont the same problem

Une solution de contournement pour masquer mon bouton?

Answer 1

Je ne considère pas cela comme un problème en soi. Il peut ne pas être (facilement) fait avec les règles CSS Bootstrap Twitter, mais si le problème est que Twitter Bootstrap remplace ce que vous voulez faire, vous pouvez toujours créer vos propres règles avec specificity plus élevé.

Un moyen simple serait d'ajouter aux attributs style="display: none;" puisque les styles en ligne bénéficient automatiquement de la plus haute spécificité.

Une manière de donner à votre classe une spécificité plus élevée consiste à élaborer un peu le sélecteur. Par exemple, cela a une spécificité plus élevée que votre exemple, mais je ne sais pas si elle est assez:

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

(j'espère bien compris votre problème ... me réprimander sinon;)