Estou usando a biblioteca Bootstrap do Twitter, versão 2.0.3 para prototipar um site. Atualmente estou usando o controle modal fornecido, ainda que em linha, para exibir o que será um formulário:

<code><div class="modal in-layout span6 offset3">
    <div class="modal-header">
        <h3>Header</h3>
    </div>
    <div class="modal-body">
        <p>Hello</p>
    </div>
    <div class="modal-footer">

    </div>
</div>
</code>

Eu escrevi meu próprio seletor para fazer uso da minha classe personalizada,.in-layout:

<code>div.modal.in-layout {
    position: static;
    top: auto;
    left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
</code>

O problema é que as regras CSS são correspondidas em uma ordem realmente inconveniente:

Essencialmente, eu preciso do.span6 e.offset3 classes para aplicar com uma prioridade mais alta do que.modal a fim de dar o meu<div> uma margem de 260px e uma largura de 460px.

Existe alguma maneira de fazer isso?