在Bootstrap 4中提供不同输出的pre html标记_Html_Bootstrap 4_Pre

在Bootstrap 4中提供不同输出的pre html标记

html bootstrap-4

在Bootstrap 4中提供不同输出的pre html标记,html,bootstrap-4,pre,Html,Bootstrap 4,Pre,我一直在研究html前标记，在从Bootstrap3切换到Bootstrap4时遇到了一个问题如果我使用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/xht

我一直在研究html前标记，在从Bootstrap3切换到Bootstrap4时遇到了一个问题

如果我使用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>


html前标记示例
这是一个正常的内容
<?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>

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}

你好。
这是html前标记测试中的内容。
这是一个预html标记测试。

我得到以下输出

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

<pre class="p-4 border">


html前标记示例
这是一个正常的内容
<?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>

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}

你好。
这是html前标记测试中的内容。
这是一个预html标记测试。

我得到以下输出

我想使用bootstrap4获得bootstrap3（第一个屏幕截图）相同的pre-html标记输出。我怎样才能做到这一点呢？

3中的

标记显然只是有一些填充和边框。您可以将实用程序类用于和。

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

下面的一行给出了您寻求的结果

code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}

这两个版本在外观上看起来很相似，但我想是填充物困扰着你？如果我们比较两个样式表，我们确实可以看到标签样式的不同。在3.3.7版本中，有以下内容：

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

在4.5.2中，填充似乎缺失，但可能是我遗漏了一些内容，因为我只是粗略地看了一下：

<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">

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

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}

我只挑了一个我认为重要的

看到您使用CDN检索样式表，您可以使用站点上托管的自定义样式表覆盖一些标记。例如，重新定义pre标记，如下所示：

pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}

在引导导入之后添加样式表，如下所示：

pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}

而4.5.2有：

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

当我使用3.3.7 pre css块时，它会起作用。谢谢。