如何使此列忽略垂直空间 [英] How to make this column ignore the vertical space
本文介绍了如何使此列忽略垂直空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在桌面模式下，图像会在全名"和表格编号"之间形成空白.如何使全名列从表单编号列的下方开始?我知道我可以将全名放在表单编号"列div内，但是可以在单独的列中使用全名.
https://jsfiddle.net/xv56d1ez/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
解决方案
问题是Bootstrap 4使用flexbox，因此每一行都是最高列的高度.如果您有单独的列，那么使它起作用的唯一方法是使用浮点数覆盖flexbox并重新排序列...
<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>
演示: https://www.codeply.com/go/Vb9StioKGq
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>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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/Vb9StioKGq
Related: Empty vertical space between columns in Bootstrap 4
这篇关于如何使此列忽略垂直空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
