twitter-bootstrap 如何在由控件形成的引导程序中很好地打印表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34337573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to print nicely table in bootstrap that is formed with controls?
提问by artur_learning
I'm trying to print a document, that is formed with bootstrap. Requirement is that print should look well/nice. (Because this document is archivised)
我正在尝试打印一个由引导程序形成的文档。要求是印刷品应该看起来不错/漂亮。（因为这个文件是存档的）
The problem is, I've done a table, that is made full of controls (input fields).
问题是，我做了一个表格，里面有很多控件（输入字段）。
It's simple drug prescription formula, and the doctor can prescribe as many drugs as he wants.
这是简单的药物处方配方，医生可以开多少药就开多少。
In the web browser it looks good:print-browserBut, when I want to print it... it breaks: print-printer.
在 Web 浏览器中，它看起来不错：print-browser但是，当我想打印它时……它会中断：print-printer。
The code, looks like this:
代码，看起来是这样的：
<div class="row">
<div class="col-sm-3 text-center">
<label>Wpisz nazw? leku</label>
</div>
<div class="row col-sm-9">
<div class="col-sm-3 text-center">
<label>Dawka startowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa od</label>
</div>
<div class="col-sm-2 text-center">
<label>Dawka max. (tolerowana)</label>
</div>
<div class="col-sm-1 text-center">
<label for="deleteDrug">Usuń</label>
</div>
</div>
</div>
<div class="row" ng-repeat="drug in visit.prescribedDrugs">
<div class="col-sm-3">
<select class="form-control" ng-options="drug.id as drug.name group by getDrugFullTypeName(drug) for drug in technical.drugs track by drug.id"
ng-model="drug.drugItemId"></select>
</div>
<div class="row col-sm-9">
<div class="col-sm-3">
<div class="input-group">
<input id="PrescribedTargetDose" class="form-control" type="text" ng-model="drug.initialDose">
<div class="input-group-addon input-sm">{{technical.drugs[drug.drugItemId].dosage}}</div>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<input id="PrescribedTargetDose"
class="form-control"
type="text"
ng-model="drug.targetDose"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated">
<div class="input-group-addon input-sm">{{technical.drugs[drug.drugItemId].dosage}}</div>
</div>
</div>
<div class="col-sm-3">
<p class="input-group ">
<input type="text"
name="PrescribedDrugCalendar"
id="newPrescribedDrugCalendar"
class="form-control"
datepicker-popup="yyyy-MM-dd"
ng-model="drug.targetDoseFrom[$index]"
is-open="isPrescribedTargetDoseFromCalendarOpened[$index]"
close-text="Zamknij"
placeholder="rrrr-mm-dd"
current-text="Dzisiaj"
clear-text="Wyczy??"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated" />
<!--ng-required="true"-->
<span class="input-group-btn hidden-print">
<button class="btn btn-default"
ng-click="openPrescribedTargetDoseFromCalendar($event, $index)"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-sm-2 text-center">
<input type="checkbox" id="CBisEffectivelyMaximalForPrescription" ng-model="drug.isEffectivelyMaximal">
</div>
<div class="col-sm-1 text-center hidden-print">
<button type="button"
class="btn btn-default text-center"
ng-click="removePrescribedDrug($index)"
ng-disabled="visit.prescribedDrugs.length==1">
<span class="glyphicon glyphicon-minus text-center" aria-hidden="true"></span> Usuń
</button>
</div>
</div>
</div>
And description for it: I have labelled row: Wpisz nazw? leku
和它的描述：我已经标记了行：Wpisz nazw？乐酷
<div class="col-sm-3 text-center">
<label>Dawka startowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa od</label>
</div>
<div class="col-sm-2 text-center">
<label>Dawka max. (tolerowana)</label>
</div>
<div class="col-sm-1 text-center">
<label for="deleteDrug">Usuń</label>
</div>
</div>
</div>
And control row: which goes like:
和控制行：它是这样的：
- Input field (select)
- Input field (integer)
- Input field (integer - activity based on buisness logic)
- Calendar
- Checkbox
- Remove item button - it's hidden print.
- 输入字段（选择）
- 输入字段（整数）
- 输入字段（整数 - 基于业务逻辑的活动）
- 日历
- 复选框
- 删除项目按钮 - 它是隐藏的打印。
But, it won't print as rows - instead of it creates as many rows, as many controls. Where I have made mistake? I'm quite new in bootstrap/angular but I've read topics about printing. In the index page I have:
但是，它不会按行打印 - 而不是创建尽可能多的行和控件。我哪里出错了？我在引导程序/角度方面很新，但我已经阅读了有关打印的主题。在索引页中，我有：
<link href="Content/bootstrap.min.css" rel="stylesheet" media="all"/>
And i also tried to make my custom.css file with media="print" - but I don't know how to fix this problem.
而且我还尝试使用 media="print" 制作我的 custom.css 文件 - 但我不知道如何解决这个问题。
Edit: Also - how to delete this little cursor on input fields, fe. This -> http://imgur.com/dFMVKQY
编辑：另外 - 如何删除输入字段上的这个小光标，fe。这 -> http://imgur.com/dFMVKQY
采纳答案by Micha? Dopieralski
did you tried adding a print stylesheet ?
您是否尝试添加打印样式表？
<link rel="stylesheet" type="text/css" media="print" href="print.css">
