Блог

Используя Bootstrap v3.3.7, у меня есть страница с двумя столбцами. Когда я печатаю эту страницу, я хочу напечатать только один столбец, но я бы хотел, чтобы он помещался на одну страницу формата А4.

 <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 только для печати?

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>