如何使此列忽略垂直空间

相关:在Bootstrap 4的列之间空的垂直空间 In desktop mode the image creates the gap between "full name" and "Form Number". How to make it so that the full name column starts right below the form number column ? I know I can just place the full name inside the Form Number column div but is it possible to do it with full name in the separate column.https://jsfiddle.net/xv56d1ez/<!doctype html><html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Print Form</title> <style type="text/css"> .line{ border-bottom: 1px solid black; } </style> </head> <body> <div class ="row"> <div class="col-sm-4" > Form Number: <span class="line">21129012</span> </div> <div class="col-sm-4"> Hostel: <span class="line">(Yes / No)</span> </div> <div class="col-sm-4"> <img src="https://i.imgur.com/rC8Btb0.jpg" height="200px" width="200px" alt="image"> </div> <div class="col-sm-4"> Full Name: <span class="line">(Yes / No)</span> </div> </div>   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body></html> 解决方案 The issue is that Bootstrap 4 uses flexbox so each row will be the height of the tallest column. If you have separate columns, the only way to make it work would be to override the flexbox using floats and re-order the columns...<div class="container-fluid"> <div class="row d-sm-block d-flex"> <div class="col-sm-4 float-right order-last"> <img src="https://i.imgur.com/rC8Btb0.jpg" height="200px" width="200px" alt="image"> </div> <div class="col-sm-4 float-left"> Form Number: <span class="line">21129012</span> </div> <div class="col-sm-4 float-left"> Hostel: <span class="line">(Yes / No)</span> </div> <div class="col-sm-4"> Full Name: <span class="line">(Yes / No)</span> </div> </div></div>Demo: https://www.codeply.com/go/Vb9StioKGqRelated: Empty vertical space between columns in Bootstrap 4 这篇关于如何使此列忽略垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！

Integrity

如何使此列忽略垂直空间