0

Boas eu tenho um problema, tenho um projecto em cordova que estava a utilizar o bootstrap 3.3.7 porem neste muito tou a passar tudo para o bootstrap 4.0.0, porem pensei em deixar os 2 no projecto pois cada um tem diferentes css. Gostaria de saber se existe algum problema quanto a isso !

4
  • Não me parece uma boa ideia, com certeza vão haver conflitos Commented 7/03/2018 às 15:15
  • @AnthraxisBR, Então na sua opinião é um erro? Commented 7/03/2018 às 15:18
  • Vou fazer uma resposta pra te mostrar o que pode ocorrer Commented 7/03/2018 às 15:19
  • Aqui tem o Guia oficial para fazer a Migração getbootstrap.com/docs/4.0/migration outro ponto bem básicão é que o Grid de uma versão é bem diferente do da outra! Inclusive os "Break Point" responsivos têm medidas diferentes de uma para o outro.
    – hugocsl
    Commented 7/03/2018 às 15:33

1 Resposta 1

4

Na maioria das situações, o que vai ocorrer é o elemento pegar o estilo da versão do Bootstrap que foi incluída por ultimo, como nos 2 exemplos a baixo:

Versão 4

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary">Botão Bootstrap 4</button>

Versão 3

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary">Botão com Bootstrap 3</button>

Agora, em alguns elementos, pode haver conflito, como no exemplo abaixo, onde a seta pra baixo do dropdown acaba ficando fora de posição usando um .btn-group e .dropdown:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group" role="group" aria-label="...">

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown com conflito
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown 1</a></li>
      <li><a href="#">Dropdown 2</a></li>
    </ul>
  </div>
</div>

Conclusão Além de conflitos de estilo, podem haver conflitos entre os JS das duas versões, a não ser que você divida sua aplicação em dois blocos diferentes pra cada versão do Bootstrap não aho que seja uma boa ideia manter as duas no mesmo projeto, recomendo migração da versão antiga para a v4, ou usar a v3 nessa nova parte.

OBS:

Teste feito no Chrome Win 10.

2
  • Muito bem explicado muito obrigado! @ Commented 7/03/2018 às 15:57
  • @Humbertovieira se resolveu o seu problema podia clicar no 'check' verde ali no canto pra aceitar a resposta, assim outros usuários vão saber que essa duvida foi solucionada ;D Commented 7/03/2018 às 21:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .