Mathjax3 переполняет столбцы начальной загрузки

#html #css #bootstrap-4 #mathjax

#HTML #css #bootstrap-4 #mathjax

Вопрос:

Я использую MathJax3 с Bootstrap4. Я знаю, что автоматический разрыв строки еще не был перенесен на MathJax3.

В следующем коде у меня есть 3 столбца: столбец с левым интервалом, основной столбец с уравнением latex и правый столбец с некоторым текстом.

 <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 . Есть ли способ добиться этого?

Ответ №1:

Чтобы достичь желаемого, замените col-sm-6 class из столбца MathJax на col

Смотрите: https://jsfiddle.net/koder613/hsg5k1ry/3 /

Кроме того, быстрым решением для остановки переполнения MathJax было бы установить overflow-x: scroll в вашем css для этого столбца значение MathJax.

1. Использование col вместо col-sm-6 устраняет проблему, если уравнение слишком длинное, но правый столбец также опускается ниже, если уравнение короткое. Но мне нравится решение overflow-x! Есть ли способ использовать переполнение только на больших экранах — md и выше, а другой — в sm и ниже?

2. @FedericoTaschin Эта ссылка работает лучше: codeply.com/p/Wim1A8XWny