0
votes

Bouton d'entrée BOOTSTRAP ADDON de groupe, Afficher le premier bouton avec coin rond après le deuxième bouton est caché

J'ai un groupe de boutons où je cache le deuxième bouton au moment de l'exécution.

mais le premier bouton maintenant comme une bordure de 90 °. Comment puis-je modifier l'échantillon suivant pour obtenir le bouton 1 spectacle avec une bordure ronde. P>

si je me cache "bouton 2" "le p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

javascript jquery html css bootstrap-4

0 commentaires

3 Réponses :

1
votes

vous pouvez faire:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

0 commentaires

2
votes

Vous pouvez basculer une classe pour masquer et contrôler également le rayon:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

0 commentaires

1
votes

Vous vous battez contre Bootstrap en essayant de modifier la frontière NTH Button. Voici le style que vous vous battez:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

2 commentaires

Ai-je tort ou la méthode CSS montre la meilleure performance? (Je n'ai jamais utilisé JSperf avant)

Oui CSS est et sera toujours le plus rapide de loin.