Mathjax3溢出了引导列

编程问答 2022-06-11

问题描述

我在Bootstrap4中使用MathJax3。我知道尚未将自动换行符移植到MathJax3。

在下面的代码中，我有3列：左间距列，带乳胶方程的主列和带某些文本的右列。

<html lang="en">
  <head>
    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- MathJax3 -->
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <script>
    MathJax = {
      tex: {
        inlineMath: [['$','$'],['\\(','\\)']],tags: 'ams'
      }
    };
    </script>
  </head>
  
  
  <body>
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
            A very long mathjax equation:
            
            \begin{equation}
                y = 2^x + 6x + 9x + 2^x + 6x + 9x + 2^x + 6x + 9x 
                2^x + 6x + 9x + 2^x + 6x + 9x + 2^x + 6x + 9x + 
                2^x + 6x + 9x + 2^x + 6x + 9x + 2^x + 6x + 9x + 
            \end{equation}
        </div>
        <div class="col-sm-3">
            Some other text: Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below),or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

结果如下图所示。您可以看到mathjax方程如何溢出中心列。我想要的是，如果发生这种情况，则将右列移动到等式下方，如果屏幕尺寸小于{sm，也会发生这种情况。有没有办法做到这一点？

enter image description here

解决方法

为了实现所需的结果，将MathJax列中的col-sm-6类替换为col

请参阅：https://jsfiddle.net/koder613/hsg5k1ry/3/

顺便说一句，一种阻止MathJax溢出的快速解决方案是在overflow-x: scroll中为该列中的css设置MathJax。

bootstrap-4htmlmathjax