首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >无法使用引导程序在打印页的同一行中显示3列

无法使用引导程序在打印页的同一行中显示3列
EN

Stack Overflow用户
提问于 2019-08-17 22:43:35
回答 1查看 258关注 0票数 1

我想在打印页面中显示三列.It在浏览器中工作,但当我进行打印预览时,它只在打印预览页面中显示两列。

html

代码语言:javascript
运行
复制
<div class="container main">
<div class="main_inner">
    <div class="row" >
          <div class="col-md-12" >
        <div class="col-md-3">
            <img src="../img/logo.jpg">
        </div>
        <div class="col-md-6">

            <h2>
                <center><b><?php echo   $row['municipality_address'];?> नगरपालिका</b></center>
            </h2>
            <h3>
                <center><b>नगरकार्यपालिकाको कार्यालय</b></center>
            </h3>
        </div>
        <div class="col-md-3">
            <div class="border_box"></div>
        </div>
    </div>
        <b></b>
    </div>

css

代码语言:javascript
运行
复制
.main{
margin-top: 10px;
border: 5px solid #00bfff;
}
.main_inner{
margin: 50px;
margin-top: 150px;
margin-bottom: 80px;
}

我想在打印页面中显示这样的页面。

但在打印预览中看起来是这样的。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-18 23:41:09

要使border_box在任何情况下都不会崩溃,请尝试将包含图像、文本、border_box (col-md-12)的分区设置为flex,方法是包括

代码语言:javascript
运行
复制
<div class="col-md-12">

代码语言:javascript
运行
复制
<div class="col-md-12" style="display:flex;">

当你尝试打印它的时候,它也不会掉下来

我已经附加了一个指向codepen的链接

在添加了border_box之后,它也没有出现在下面。我希望这就是你要找的

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57537270

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档