如何解决Mathjax3溢出了引导列
我在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，也会发生这种情况。有没有办法做到这一点？
解决方法
为了实现所需的结果，将MathJax列中的col-sm-6类替换为col
请参阅：https://jsfiddle.net/koder613/hsg5k1ry/3/
顺便说一句，一种阻止MathJax溢出的快速解决方案是在overflow-x: scroll中为该列中的css设置MathJax。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
