在 Bootstrap 4 中给出不同输出的 pre html 标签

问题描述

我一直在研究 pre html 标签，但在从 Bootstrap 3 切换到 Bootstrap 4 时遇到了一个问题。

如果我使用 Bootstrap 3.3.7 运行此代码，

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<Meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Pre html tag sample</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
This is a normal content
<pre>Hello there. 
This is a content inside the pre html tag test.
This is a pre html tag test.
</pre>
</body>
</html>

我得到以下输出

如果我使用 Bootstrap 4.5.2 运行此代码，

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<Meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Pre html tag sample</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<body>
This is a normal content
<pre>Hello there. 
This is a content inside the pre html tag test.
This is a pre html tag test.
</pre>
</body>
</html>

我得到以下输出

我想使用 Bootstrap 4 获得与 Bootstrap 3（第一个屏幕截图）相同的 pre html 标签输出。我该如何实现？

解决方法

这两个版本在外观上看起来很相似，但我想是填充让您感到困扰？如果我们比较两个样式表，我们确实可以看到标签样式的差异。在 3.3.7 版本中是这样的：

import numpy as np 
import matplotlib.pyplot as plt 

num_of_intervals = 2000
x = np.linspace(-10,10,num=num_of_intervals)

y_inputs = 1/(1+np.exp(-x)) # SIGMOID FUNCTION

plt.figure(figsize = (15,9))
plt.plot(x,y_inputs,label = 'Sigmoid Function')
plt.vlines(x=0,ymin = min(y_inputs),ymax=max(y_inputs),linestyles='dashed')
plt.title('Sigmoid Function')
plt.show()

在 4.5.2 中似乎缺少填充，但我可能错过了一些东西，因为我只是粗略地看了一下：

pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}

请注意，还有一些更相关的样式，例如：

pre{display:block;font-size:87.5%;color:#212529}

我只挑出我认为重要的那个。

看到您使用 CDN 来检索样式表，您可以code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} 一些带有托管在您网站上的自定义样式表的标签。例如像这样重新定义 pre 标签：

override

然后像这样在 Bootstrap 导入之后添加样式表：

pre {
display:block;
padding:9.5px;
font-size:87.5%;
color:#212529
}

请注意，两个版本之间的边距也不同。例如 3.3.7 有这个：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yoursite.com/custom.css">

虽然 4.5.2 有：

pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}

否则建议您在3.x版本浏览网站时使用浏览器的inspector功能，关注pre标签，然后复制应用的样式。

3 中的 <pre> 标签显然只有一些填充和边框。您可以将实用程序类用于 border 和 padding。
下面的行似乎给出了您寻求的结果。

<pre class="p-4 border">

我使用了这个引导程序类，就我而言，它看起来足够接近引导程序 3：

<pre class="border rounded bg-light">

所以我不需要自定义 CSS。

bootstrap-4 html pre