使用bootstrap 网页打印 文字颜色丢失

Posted 2023-04-26

不知道大家有没有遇到过这样一个问题，如果应用了bootstrap.css， 当使用网页打印时，文字的颜色都会丢失，div中的背景色也会丢失。不信可以看看bootstrap的官网。

参考技术A 在bootstrap.css中，专门有针对打印的设置，注意第4行。
@media
print


*


text-shadow:
none
!important;

color:
#000
!important;

background:
transparent
!important;

box-shadow:
none
!important;

Bootstrap 页脚列堆叠和丢失页脚颜色

【中文标题】Bootstrap 页脚列堆叠和丢失页脚颜色

【英文标题】：Bootstrap Footer Columns stacking and loosing footer colour

【发布时间】：2017-02-01 04:09:47

【问题描述】：

基本上我做了一个黑色背景的页脚。我有 3 个 Col-4，里面有各种信息。在桌面上看起来不错，但在移动设备上，我想要的列堆叠。当他们堆叠时，页脚不会走得更远，所以它下面有一个大的白色部分。我想知道是否有人可以看看并提出一些建议。代码可能很乱，因为我是新手。

#footer 
	height: 200px;
	position: absolute;
	bottom: 0;
	background-color: #000000;
	width: 100%;
 

<footer>
      <div class="container-fluid">
      <div class="row">
 <div class="col-sm-4 col-md-4">
<br>
<br>
Home<br>
Services<br>
Gallery<br>
About<br>
Contact
 </div>
  <div class="col-sm-4 col-md-4">
      <aligncenter>Check Out Our Other pages</aligncenter><br>
      <aligncenter2><img src="Facebook-icon.png"   /><br>
    <img src="YouTube-icon-full_color.png"   /><br>
    <img src="new-instagram-icon-topic.png"   /></aligncenter2>
 </div>
 <div class="col-sm-4 col-md-4">
      <div class="container-fluid" 
<br>
<br>
<alignright>
Registered office<br>
 
14 Stott Court<br>
 
Tweedmouth<br>
 
Berwick-Upon-Tweed<br>
 
Northumberland<br>
 
TD152YP
</alignright>
      </div>

【参考方案1】：

对于 Bootstrap 中的移动列，您可以更改

"col-sm-*"

到你需要的值，它只会在小屏幕上工作。

#footer 
	height: 200px;
	position: absolute;
	bottom: 0;
	background-color: #000000;
	width: 100%;
 

<footer>
      <div class="container-fluid">
      <div class="row">
 <div class="col-sm-12 col-md-4">
<br>
<br>
Home<br>
Services<br>
Gallery<br>
About<br>
Contact
 </div>
  <div class="col-sm-12 col-md-4">
      <aligncenter>Check Out Our Other pages</aligncenter><br>
      <aligncenter2><img src="Facebook-icon.png"   /><br>
    <img src="YouTube-icon-full_color.png"   /><br>
    <img src="new-instagram-icon-topic.png"   /></aligncenter2>
 </div>
 <div class="col-sm-12 col-md-4">
      <div class="container-fluid" 
<br>
<br>
<alignright>
Registered office<br>
 
14 Stott Court<br>
 
Tweedmouth<br>
 
Berwick-Upon-Tweed<br>
 
Northumberland<br>
 
TD152YP
</alignright>
      </div>