当前位置: 首页 > 知识库问答 >
问题:

Bootstrap 3-打印布局和每个网格列后的分符

于嘉誉
2023-03-14

如果您以这个例子为例(在此查看: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.css的@media print部分,但我看不到任何与div相关的会导致这种情况发生的内容。

有人知道如何避免这种情况吗?

共有1个答案

淳于祺
2023-03-14

Bojangle的评论让我找到了正确的方向,所以我将回答我自己的问题。

使用“xs”大小的网格列(根据http://getbootstrap.com/css/#grid-options),该列用于“Extra small devices Phones(<768px)”),Bootstrap高兴地按预期打印。

<div class="container">
  <div class="row">
    <div class="col-xs-6">Column1</div>
    <div class="col-xs-6">Column2</div>
  </div>
</div>
 类似资料:
  • 问题内容: 范例GUI大家好,我有 问题。如果有人可以帮助,那就太好了。我正在使用border和 gridlayout,并且试图拆分GUI,但是这没有发生,因为我希望 按钮占整体的一小部分,可以说是1/5,但目前 超过了GUI的一半。我也尝试将按钮放在尺寸上, 但是我不确定这是否是一个好习惯。我有两个类,一个是 RunFurniture,它是框架的主要方法,另一个是 GUI的PanelFurnit

  • 主要内容:本节引言,1.相关属性总结图,2.使用实例:计算器布局的实现:,3.用法归纳:,4.使用GridLayout要注意的地方:,5.低版本sdk如何使用GridLayout:,本节小结本节引言 今天要介绍的布局是Android 4.0以后引入的一个新的布局,和前面所学的TableLayout(表格布局) 有点类似,不过他有很多前者没有的东西,也更加好用, 可以自己设置布局中组件的排列方式 可以自定义网格布局有多少行,多少列 可以直接设置组件位于某行某列 可以设置组件横跨几行或者几列 另外,

  • jQuery Mobile 提供了一套基于 CSS 的分列布局。然而,在移动设备上,由于考虑手机的屏幕宽度狭窄,一般不建议使用分栏分列布局。 但有时您想要将较小的元素(如按钮或导航标签)并排地排列在一起,就像是在一个表格中一样。这种情况下,推荐使用分列布局。 网格中的列是等宽的(合计是 100%),没有边框、背景、margin 或 padding。 这里有四种布局网格可供使用: 网格类:ui-gr

  • 今天要学的布局和上一节的 TableLayout 很类似,是在 Android 4.0 版本引入的布局方式。GridLayout 很有意思,自从引入之后在 Android 开发圈有以下特点: 大部分的开发者可能都不知道有这个布局方式的存在; 有些开发者虽然知道,但是很多时候不会去使用这个布局方式; 很少的开发者会花时间研究这个布局方式,也不会灵活的使用; 之所以会花一个章节来讲,是希望大家能够引起

  • 因为屏幕通常都比较窄,所以使用多栏布局的方法在移动设备上不是推荐的方法。但是总有时候你会想要把一些小的元素并排放置(比如按钮,或导航标签) Jquery Mobile框架提供了一种简单的方法构建基于css的分栏布局,叫做ui-grid Jquery Mobile提供了两种预设的配置布局:两列布局(class 含有 ui-grid-a)和三列布局 (class 含有 ui-grid-b)—几乎可满足

  • 我需要Android TV的自定义键盘,就像下面图像中的这个。布局有一个带有网格布局管理器的回收器视图来自定义行和列。 但是当我运行应用程序时,布局在最后一行没有显示正确的按钮宽度。“空格”按钮的量程应为4,“移位”按钮2和“归零”按钮3。