如何在由控件组成的引导程序中很好地打印表格？

我正在尝试打印由引导程序形成的文档。要求是打印看起来应该不错/不错。（因为此文档已存档）

问题是，我已经完成了一个表，该表充满了控件（输入字段）。

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

在Web浏览器中看起来不错：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>

并对其进行描述：我已将行标记为：Wpisznazwę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. 删除项目按钮-它是隐藏的打印。

但是，它不会以行的形式打印-而是会创建尽可能多的行和尽可能多的控件。我在哪里弄错了？我在Bootstrap / Angular中是一个新手，但是我已经阅读了有关打印的主题。在索引页面中，我有：

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

而且我还尝试使用media =“ print”制作我的custom.css文件-但我不知道如何解决此问题。

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