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>

Twitter Bootstrap在一个页面上打印一个长列

1 个答案: