css - Twitter Bootstrap 在一页上打印一长列

Question

使用 Bootstrap v3.3.7 我有一个包含两列的页面。当我打印此页时，我只想打印一栏，但我希望它适合一张 A4 纸。

<div class="col-xs-4">
    <!-- long list of input fields content goes here -->
    <div class="form-group">
        <label for="firstname">First name</label>
        <input class="form-control input-sm" name="firstname" type="text" value="" id="firstname">
    </div>
    <div class="form-group">
        <label for="lastname">Last name</label>
        <input class="form-control input-sm" name="lastname" type="text" value="" id="lastname">
    </div>
    <!-- about 20 more input fields go here -->
</div>

<div class="col-xs-8 hidden-print">
    <!-- Some content that will not get printed -->
</div>

我只打印第一列(第二列将在打印时隐藏)，但因为它很长，所以它跨越了两个打印页面。我想把它放在一页上，因为我有页面的右半部分是空闲的，我想我可以把左栏分成两列，这样它就可以放在一页上。

仅使用 CSS 是否可行，或者我必须更改我的 HTML 以仅用于打印？

Answer 1

Boostrap 很棒!
我刚刚找到了解决方案。在我的例子中，将 col-md-* 用于桌面屏幕，将 col-xs-* 用于小屏幕和打印。

<div class="col-xs-12 col-md-4">
    <div class="col-xs-6 col-md-12">
        <!-- long list of input fields content goes here -->
        <div class="form-group">
            <label for="firstname">First name</label>
            <input class="form-control input-sm" name="firstname" type="text" value="" id="firstname">
        </div>
    </div>
    <!-- this is where on desktop I still have one column but on print (small screen) I break into two 50% columns -->
    <div class="col-xs-6 col-md-12">
        <div class="form-group">
            <label for="lastname">Last name</label>
            <input class="form-control input-sm" name="lastname" type="text" value="" id="lastname">
        </div>
    </div>
</div>

<div class="col-xs-8 hidden-print">
    <!-- Some content that will not get printed -->
</div>