Выровняйте элемент `div`or` span` снизу - PullRequest
Новая
       8

Выровняйте элемент `div`or` span` снизу

0 голосов
/ 05 февраля 2020

Как изменить код так, чтобы tabs был выровнен по нижней части div

У меня есть этот код 

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header"><?php if(file_exists($find_logo[0])) { echo '<img style="max-width:275px; max-height:80px; height:auto; width:auto;" src="'.$find_logo[0].'" />'; }?><span class="small pull-right" data-toggle="popover"><i class="fas fa-question-circle"></i></span>
        <span class="pull-right">
        <h5>
            <ul class="nav nav-tabs">
                <li role="presentation" <?php if($page_tabs == 'details') { echo 'class="active"'; } ?>><a href="dossier_detail.php?id=<?php echo $_GET['id']; ?>"><i class="fas fa-home"></i> Algemeen</a></li>
                <li role="presentation" <?php if($page_tabs == 'documenten') { echo 'class="active"'; } ?>><a href="dossier_detail_documenten.php?id=<?php echo $_GET['id']; ?>"><i class="fas fa-file-invoice-dollar"></i> Documenten</a></li>
                <li role="presentation" <?php if($page_tabs == 'calculaties') { echo 'class="active"'; } ?>><a href="dossier_detail_calculaties.php?id=<?php echo $_GET['id']; ?>"><i class="fas fa-calculator"></i> Calculaties</a></li>
                <li role="presentation" <?php if($page_tabs == 'certificaten') { echo 'class="active"'; } if($row['soort'] == 'offerte') { echo 'class="disabled"'; } ?>><a href="dossier_detail_certificaten.php?id=<?php echo $_GET['id']; ?>"><i class="fas fa-file-contract"></i> Certificaten</a></li>
                <li role="presentation" <?php if($page_tabs == 'bestanden') { echo 'class="active"'; } ?>><a href="dossier_detail_bestanden.php?id=<?php echo $_GET['id']; ?>"><i class="fas fa-copy"></i> Bestanden</a></li>
            </ul>
        </h5>
        </span>
        </h1>
    </div>
</div>

В результате этого tabs выровнен по центру

С изменением <span class="pull-right"> на <span class="pull-right" style="padding-top:38px;"> я надеялся добиться (также пробовал это на других элементах ).

Но это дополнение не дает мне никакого результата? Как этого добиться?

1 Ответ

2 голосов
/ 05 февраля 2020

Изначально вам необходимо реструктурировать код html. См. Ниже пример

Ваш код имеет, html проблемы с проверкой

  • Вложенный заголовок не разрешен
  • h5 элемент не разрешен в качестве дочернего элемента span элемента
  • ul не допускается, дочерний элемент h5 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-2 col-md-3">
      <h1 class="page-header">
        <img style="max-width:275px; max-height:80px; height:auto; width:auto;" src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/62.2.7/chromium/chromium_48x48.png" alt="" />
        <span class="small pull-right" data-toggle="popover"><i class="fas fa-question-circle"></i></span>
      </h1>
    </div>
    <!-- end col -->
    <div class="col-10 col-md-9 align-self-end">
      <ul class="nav nav-tabs">
        <li role="presentation" ><a href="dossier_detail.php?id="><i class="fas fa-home"></i> Algemeen</a></li>
        <li role="presentation" ><a href="dossier_detail_documenten.php?id="><i class="fas fa-file-invoice-dollar"></i> Documenten</a></li>
        <li role="presentation" ><a href="dossier_detail_calculaties.php?id="><i class="fas fa-calculator"></i> Calculaties</a></li>
        <li role="presentation" ><a href="dossier_detail_certificaten.php?id="><i class="fas fa-file-contract"></i> Certificaten</a></li>
        <li role="presentation" ><a href="dossier_detail_bestanden.php?id="><i class="fas fa-copy"></i> Bestanden</a></li>
      </ul>
    </div>
    <!-- end col -->
  </div>
  <!-- end row -->
</div>
...