Question

如何更改代码，以使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;">，我希望实现这一目标（也在其他元素上进行了尝试）。

但是这个附加组件没有给我任何结果吗？如何实现呢？

Answer 1

最初，您需要重组html代码。参见下面的示例

您的代码存在html验证问题

不允许使用嵌套标题
h5元素不允许作为元素范围的子元素
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>

将“ div”或“ span”元素与底部对齐

1 个答案: