可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

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

回答2:

Check that my friend

<!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">
    <img src="https://i.imgur.com/rC8Btb0.jpg" height="200px" width="200px" alt="image">
    </div>

    <div class="col-sm-4" >
    <div class="row">
    <div class="col-sm-12" >
     Form Number: <span class="line">21129012</span>
    </div>
    
    </div>
    <div class="row">
    <div class="col-12" >
     Full Name: <span class="line">(Yes / No)</span>
    </div>
    
    </div>
    
        <div class="row">
    <div class="col-12" >
    Hostel: <span class="line">(Yes / No)</span>
    </div>
    
    </div>
   
  </div>


  </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>

回答3:

By setting the inline style for image of 200px, you set the height of your whole bootstrap row. Bootstrap row is based on flexbox and this is the reason why your Full name div is not where you would like it to be. You should put full name bellow Form number or restructure your html in some other way.