Twitter Загрузочный лоток для печати длинного столбца на одной странице

Question

Использование 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 для печати?

Answer 1

Boostrap is great!
Я только что нашел решение. Используйте 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>