Bootstrap et ligne simple MathJax

Question

J'utilise Bootstrap 4 et MathJax. Ajout d'une formule MathJax à un élément span crée une nouvelle ligne non désirée JSFiddle:

<span class="input-group-addon">Variable \(x_1 \)</span>

J'ai essayé d'ajouter display: block; à l'élément span. Tout est une seule ligne mais l'élément span n'est pas connecté correctement à son voisin.

Je souhaite avoir une seule ligne span, qui est attachée correctement.

Answer 1

Peut être que vous recherchez cette

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<p> 
 
    Regular: 
 
</p> 
 
<div class="input-group"> 
 
    
 
     <span class="input-group-addon">Variable \(x_1 \)</span> 
 
     <span class="input-group-btn"> 
 
     <select class="btn btn-sm btn-primary"> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
      <option>4</option> 
 
      
 
     </select> 
 
     </span> 
 
    
 
     
 
    </div>

vérifier ce Fiddle aussi Working Demo