如何在由控件形成的引导程序中很好地打印表格？ [复制]

Question

我正在尝试打印一个使用引导程序形成的文档。要求是打印应该看起来很好/很好。 （因为这个文件是存档的）

问题是，我做了一个表格，里面充满了控件（输入字段）。

这是简单的药物处方，医生可以开任意数量的药物。

在网络浏览器中看起来不错：print-browser 但是，当我想打印它时……它会中断：print-printer。

代码如下：

 <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>

及其描述： 我已标记行： Wpisz nazwę leku

                <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>

和控制行：类似于：

1. 输入字段（选择）
2. 输入字段（整数）
3. 输入字段（整数 - 基于业务逻辑的活动）
4. 日历
5. 复选框
6. 删除项目按钮 - 它是隐藏的打印。

但是，它不会打印为行，而是创建尽可能多的行和控件。 我在哪里犯了错误？我在引导程序/角度方面很新，但我已经阅读了有关打印的主题。 在我的索引页面中：

<link href="Content/bootstrap.min.css" rel="stylesheet" media="all"/>

我还尝试使用 media="print" 制作我的 custom.css 文件 - 但我不知道如何解决这个问题。

编辑：另外 - 如何删除输入字段上的这个小光标，fe。这 -> http://imgur.com/dFMVKQY

Answer 1

您是否尝试添加打印样式表？

<link rel="stylesheet" type="text/css" media="print" href="print.css">

More info.