Как заставить этот столбец игнорировать вертикальное пространство - PullRequest
Новая
       1

Как заставить этот столбец игнорировать вертикальное пространство

0 голосов
/ 20 сентября 2018

В режиме рабочего стола изображение создает разрыв между «полным именем» и «номером формы».Как сделать так, чтобы столбец с полным именем начинался прямо под столбцом с номером формы?Я знаю, что могу просто поместить полное имя в 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>

Ответы [ 3 ]

0 голосов
/ 20 сентября 2018

Проблема в том, что Bootstrap 4 использует flexbox, поэтому каждая строка будет высотой самого высокого столбца.Если у вас есть отдельные столбцы, единственный способ заставить его работать, это переопределить flexbox с помощью float и изменить порядок столбцов ... 

<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

Похожие: Пустое вертикальное пространство между столбцами в Bootstrap 4

0 голосов
/ 20 сентября 2018

Проверьте, что мой друг 

<!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>
0 голосов
/ 20 сентября 2018

Устанавливая встроенный стиль для изображения размером 200 пикселей, вы устанавливаете высоту всей строки начальной загрузки.Строка Bootstrap основана на flexbox, и это причина, по которой вы не хотите, чтобы ваше полное имя div было таким, каким вы хотите его видеть.Вы должны указать полное имя под номером формы или реструктурировать свой HTML другим способом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...