<pre> tag does not work on bootstrap 4 modal

Question

I am trying to use <pre> tag in a bootstrap 4 modal but it does not seem to work correctly. Here is the output of the json put inside of <pre> tag. I know I am missing something there but not sure what it might be:

Here is the html code:

<div class="modal" id="error_jobs_@guid" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="error_jobs_@guid">Error</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
      </div>
      <table class="table no-margin">
        <tbody>
          <tr>
            <td>
              <pre>@JsonConvert.SerializeObject(item)</pre>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Any idea why it might happen because I remember it worked in bootstrap 3 ?

EDIT 1:

Here is a runnable example: here

Considered using <code> and it was a little bit better but anyway not the desired result. Actually I used all combinations with <pre> and <code> but none of them works correctly. Here is an image how it looks like using <code> tag:

Answer 1

这不是应该缩进的，因为“ JSON对象”基本上是一个字符串，在html中没有适当的缩进。

您可以将字符串解析为json对象，然后将json对象解析为string以获取正确的缩进。

如果要从数据库中获取json，则可以将其解析为字符串并将其添加到html中。

var jsonString = document.getElementById("pretty-json").innerHTML;
document.getElementById("pretty-json").innerHTML = JSON.stringify(JSON.parse(jsonString), null, 2);

您可以看到示例here。