Bootstrap和MathJax单行

Question

我正在使用Bootstrap 4和MathJax。添加MathJax式到span元素创建不希望的新行JSFiddle：

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

我尝试添加display: block;到span元件。所有东西都是一条线，但span元素没有正确连接到它的邻居。

我想拥有一个正确连接的单行span元素。

Answer 1

可能是你正在寻找这个

<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>

检查这个小提琴也Working Demo