Pergunta

Eu realmente quero implementar isso no meu projeto :

<div class="container">
        <ul class="nav nav-pills nav-justified">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Downloads</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
      </div>
</div>

No entanto eu tenho um pedido e é para retirar o ágil recursos.Para ser mais exato - para evitar o empilhamento vertical quando a tela fica menor.

Ontem passei o dia inteiro procurando maneiras de fazer Bootstrap 3 responder.Eu tentei com a criação personalizada meu arquivo css substituindo as características que eu quero, mas desde que eu estou apenas começando a cavar no CSS eu achar que é muito difícil, e, no momento, impossível alterar manualmente tudo o que precisa ser mudado.Eu tentei com o compilador, no site oficial e teve algum sucesso, mas ainda havia alguns sensível recursos de esquerda (como as classes usadas em uma forma ainda estavam causando elementos a recolher).Então eu tentei bassjobsen do trabalho a partir aqui e ele era muito próxima, mas, finalmente, quando eu falei hoje para o meu chefe, decidimos que vamos cortar a fluidez muito e ficar com a largura definida.Assim que eu voltar para o site oficial, onde há uma seção que descreve como remover a capacidade de resposta que você pode ler aqui mas o problema é que a sugestão e o exemplo fornecido para esta sugestão é apenas uma solução parcial.Para um meu nav-pills ainda colapso depois de atingir certa largura.Eu baixei e incluído o não-responsivo.arquivo css que foi nos exemplos de projeto, para que este não é o problema.Como eu vejo as coisas de um necessário modificar cada classe manualmente e não há nenhuma maneira fácil para fazer bootstrap 3 para apenas hi-res dispositivos (me Corrija se eu estiver errado, por favor).

Me desculpe, eu não posso fornecer mais código, fiz muitas tentativas, mas eu não acho que poderia ser de alguma ajuda.Se alguém teve o mesmo problema e tem uma solução para isso, ele vai ser mais apreciado.Estou pensando em abandonar bootstrap e apenas CSS/jQuery código coisas, mas eu realmente gosto deste recurso e quero adicioná-lo ao meu projeto antes de continuar.

Foi útil?

Solução

Oi neste menu, você pode fazer isso :

  • Um remover a classe nav-justified isso remove o ágil estilos.

  • Duas tornar o seu recipiente com a sua fixo width.

    .container {
      width:800px;
    }
    

Vista esta demonstração http://jsfiddle.net/52VtD/561/.

Finalmente, se você estiver usando o bootstrap apenas para o visual do tema eu não acho que é o melhor caminho.

Para manter os estilos de nav-justified você pode acompanhar essa e colocá-lo em outra classe:

.nav-pills li {
  float:none;
  display:table-cell;
  width:1%;
  text-align:center;
}

O demo http://jsfiddle.net/52VtD/566/

Editar

A lógica Aqui -->

Eu remover a classe nav-justified porque é a última que está substituindo os estilos no ul e, provavelmente, é a chamada classe a media queries.Para remover esta você a evitar as consultas de mídia declaração e não mudar de posição ou exibe para o sensível.

E para manter o visual do nav-justified adicionar alguns estilos, e eu apenas os estilos e colocá-lo sobre a outra declaração de classe, que não toma o ágil parte.

Se você pesquisar aqui http://getbootstrap.com/dist/css/bootstrap.css bem, você pode achar que classe são chamados pela mídia de consultas de declaração.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top