无涯教程网

Css Bootstrap 3 在每个网格列之后打印布局和中断

发布于11月13日

如果你举这个例子(在这里查看:http://www.bootply.com/93816)

<div class="container">
  <div class="row">
    <div class="col-md-6">Column1</div>
    <div class="col-md-6">Column2</div>
  </div>
</div>

当您对生成的页面进行打印预览时，似乎会导致列堆叠/拆分(就像移除了浮动一样)，而不是在通常的网格布局中显示它们.

我已经看过bootstrap的@media print个部分.css和我看不到任何与div相关的东西会导致这种情况发生.

有人知道怎么避免这种情况吗？

推荐答案

Bojangles的 comments 让我走上了正确的方向，所以我将回答我自己的问题.

Bootstrap使用"X"大小的网格栏(按http://getbootstrap.com/css/#grid-options表示，网格栏用于"超小型设备手机(<；768px)")，可以愉快地打印出预期的内容.

<div class="container">
  <div class="row">
    <div class="col-xs-6">Column1</div>
    <div class="col-xs-6">Column2</div>
  </div>
</div>

Css相关问答推荐

如何让CSS过渡应用时宽度增加，而不是减少？

如何定位此下拉框的下拉面板

使用tailwind 将父div限制为其具有溢出的最短子级的高度

Astro网站在使用Astro Build构建后无法正常工作

使用高图的背景大小渐变

在最小和最大视口之间时具有固定值的 CSS 钳位

Tailwind CSS 隐藏和可见

内部和外部 div 之间的像素大小的间隙

整个列的 CSS Grid Margin Top

BootStrap：右对齐嵌套手风琴

停止 div 推动另一个 div 做出react

有没有办法让它比它更敏感？

宽度为 x VW 的元素似乎对窗口调整大小没有react

当我进入登录页面时，它处于桌面模式(响应式设计消失)

flexbox 布局中的 Padding-bottom/top

导航栏中的 Bootstrap 3.0 按钮

CSS设置宽度以填充剩余区域的百分比

填充剩余的垂直空间 - 仅 CSS

如何在 javascript 中获取 HTML 元素的样式值？

HTML浮动右元素顺序

实用课程推荐

相关教程推荐