Bootstrap页面打印

Question

我想打印一个引导页面。这是我的页面布局

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <img src="image/logo.png">          
        </div>
    </div>
</div>
<div class="container" id="student">
    <div class="row">
        <div class="col-sm-4">
            <h1>Student</h1>
        </div>
        <div class="col-sm-offset-2 col-sm-6" id="date">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="focusedInput"> <b>Date:</b></label>
                        <input class="form-control" id="focusedInput" type="text" placeholder="DD Month Year">
                    </div>
                </form>         
        </div>
    </div>
</div>

我也是css

@font-face {
    font-family: "myfont";
    src: url("../fonts/opensans/OpenSans-Regular 2.ttf");
}
body{
    font-family: "myfont";
    /*-webkit-print-color-adjust: exact;*/
}

img{
    width: 150px;
}
#student{
    margin-top: 50px;
}
#date{
    background: black;
    margin-top: 20px;
    color: white;
    padding: 10px;
}

问题是：css没有正确加载。我尝试搜索stackoverflow但没有得到任何确切的解决方案。我怎样才能做到这一点？ 这是小提琴https://jsfiddle.net/wc6rga7o/

Answer 1

试

@media print {
    /* Your styles here */
    body{
           color: #111111;
    }
    #date{
           -webkit-print-color-adjust: exact!important;
    }

}

更新了你的小提琴https://jsfiddle.net/wc6rga7o/2/