使用引导程序中包含的4张照片，以便您可以在全屏模式下查看侧面导航菜单，然后仅在移动视图中显示的内容突出显示了菜单。
我有一个导航栏，然后在网站左侧创建了一个子菜单。因此，主导航栏具有登录名和注销名，并且侧面导航菜单提供了子类别等。
在全屏模式下，一切看起来都很不错。
但是在移动视图中，带有登录和注销功能的主导航栏在切换按钮中显示，副导航菜单完全消失。我试图将其添加到导航栏中，但问题始终存在，我仅在移动视图中需要它。
我还尝试将其始终移动到导航栏上导航栏的顶部。我需要知道仅在移动设备或全屏模式下，或者有人知道其他解决方法时，才能使项目更改位置的方法。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fav and touch icons -->
<div class="header">
<nav class="navbar fixed-top navbar-site navbar-light bg-light navbar-expand-md"
role="navigation">
<div class="container">
<div class="navbar-identity">
<a href="<?php echo base_url();?>posts" class="navbar-brand logo logo-title">
<span class="logo-icon"><img class="navbar-brand" src="<?php echo base_url(); ?>" width="100px" height="78px">
</span>Website<span> </span> </a>
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggler pull-right" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</div>
<ul class="navbar-collapse collapse">
<li class = "dropdown-item"><a href="<?php echo base_url() ?>posts"><strong>Posts</strong></a></li>
<?php if(!$this->session->userdata('logged_in')): ?>
<li class="dropdown-item"><a href="<?php echo base_url();?>users/login"><strong>Login</strong></a></li>
<li class="dropdown-item" ><a href="<?php echo base_url();?>users/register"><strong></strong></a></li>
<?php endif; ?>
<?php if($this->session->userdata('logged_in')) :?>
<li class="dropdown-item"><a href="<?php echo base_url();?>users/logout"><i class=" icon-logout"></i><strong> Log out</strong></a>
</li>
<?php endif; ?>
</ul>
</li>
<li class="postadd nav-item"><a class="btn btn-block btn-border btn-post btn-danger nav-link" href="<?php echo base_url();?>posts/create">Blogg</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<!-- /.header -->
<div class="search-row-wrapper" style="background-image: url(images/bg.jpg)">
<div class="inner">
<div class="container ">
<form action="#" method="GET">
<div class="row">
<div class="col-md-3">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="main-container">
<div class="container">
<div class="row">
<!-- this (.mobile-filter-sidebar) part will be position fixed in mobile version -->
<div class="col-md-3 page-sidebar mobile-filter-sidebar">
<aside>
<div class="sidebar-modern-inner">
<div class="block-title has-arrow sidebar-header">
<h5><a href="<?php echo base_url();?>posts"><span class="title">Categories</a></h5>
</div>
<div class="block-content categories-list list-filter ">
<ul class=" list-unstyled">
<li><a href="<?php echo base_url();?>posts"><span class="title">All Categories</span></a>
</li>
<li><a href="<?php echo base_url();?>categories/posts/1243243"><span class="title">Female Escorts </span></a></li>
<li><a href="<?php echo base_url();?>categories/posts/23427874"><span class="title">Massage Parlors and Rub Downs</span></a></li>
<li><a href="<?php echo base_url();?>categories/posts/234324"><span class="title">Trans and Gay Escorts </span></a></li>
<li><a href="<?php echo base_url();?>categories/posts/15423465"><span class="title">Strip Clubs </span></a></li>
</li>
</ul>
</div> <!--/.categories-list-->
<div class="block-title has-arrow ">
<h5><a href="#">Location</a></h5>
</div>
<div class="block-content locations-list list-filter ">
<ul class="browse-list list-unstyled long-list">
<li><a href="sub-category-sub-location.html"> Miami </a></li>
<li><a href="sub-category-sub-location.html"> Broward County </a></li>
<li><a href="sub-category-sub-location.html"> West Palm Beach </a></li>
<li><a href="sub-category-sub-location.html"> Florida Keys </a></li>
<li><a href="sub-category-sub-location.html">Orlando </a></li>
<li><a href="sub-category-sub-location.html"> Jacksonville</a></li>
</ul>
</div>
</div>
</aside>
</div>
<!--/.page-side-bar-->
<div class="col-md-9 page-content col-thin-left">
<div class="category-list ">
<div class="tab-box ">
<!-- INSERTING THE CODE HERE TO LOOP-->
<?php
if (empty($posts)) {
echo '<div class="text-center">';
echo "<h3>";
echo "<strong>";
echo "No matching results at this time.";
echo "</strong>";
echo "</h3>";
echo "</div>";
echo '</div>
<!--/.tab-box-->
<div class="pull-right col-xs-6 text-right listing-view-action"><span
class="list-view active"><i class=" icon-th"></i></span> <span
class="compact-view"><i class=" icon-th-list "></i></span> <span
class="grid-view "><i class=" icon-th-large "></i></span></div>
</div>
<!--/.listing-filter-->
<!-- Mobile Filter bar-->
<div class="mobile-filter-bar col-xl-12 ">
<!-- Mobile Filter bar End-->
<div class="tab-content">
<div class="tab-pane active " id="alladslist">
<div class="adds-wrapper row no-margin">
<div class="item-list">
<div class="row">
</div>
</div>
</div>';
} else {
foreach($posts as $post):{ ?>
</div>
<!--/.tab-box-->
<div class="pull-right col-xs-6 text-right listing-view-action"><span
class="list-view active"><i class=" icon-th"></i></span> <span
class="compact-view"><i class=" icon-th-list "></i></span> <span
class="grid-view "><i class=" icon-th-large "></i></span></div>
<div style="clear:both"></div>
</div>
<!--/.listing-filter-->
<!-- Mobile Filter bar-->
<div class="mobile-filter-bar col-xl-12 ">
<ul class="list-unstyled list-inline no-margin no-padding">
<li class="filter-toggle">
<a class="">
<i class=" icon-th-list"></i>
</a>
</li>
<li>
</li>
</ul>
</div>
<div class="menu-overly-mask"></div>
<!-- Mobile Filter bar End-->
<div class="tab-content">
<div class="tab-pane active " id="alladslist">
<div class="adds-wrapper row no-margin">
<div class="item-list">
<div class="row">
<div class="col-md-2 no-padding photobox">
<div class="add-image"><span class="photo-count"><i class="fa fa-camera"></i> </span> <a href="<?php echo site_url('/posts/'.$post['slug']); ?>"><img class="thumbnail no-margin" src="<?php echo site_url();?>assets/images/posts/<?php echo $post['post_image']; ?>" alt="img"></a>
</div>
</div>
<!--/.photobox-->
<div class="col-md-7 add-desc-box">
<div class="ads-details">
<h5 class="add-title"><a href="<?php echo site_url('/posts/'.$post['slug']); ?>">
<?php echo $post['title']." ---". $post['Number'];//TITLE OF THE POST>?></a></h5>
<span class="info-row">
<span
class="date"><i class=" icon-clock"> </i> </span> <small class="category">Location: <?php echo $post['Area']; ?> </small>
</div>
</div>
<!--/.add-desc-box-->
<div class="col-md-3 text-right price-box">
</div>
<!--/.add-desc-box-->
</div>
</div>
<!--/.item-list-->
<?php }endforeach; ?>
<?php } ?>
<!--/.photobox-->
<!--/.add-desc-box-->
<!--/.item-list-->
</div>
</div>
<div class="tab-box"><a href=""> <i class=" icon-star-empty"></i>
</a></div>
</div>
<div class="pagination-bar text-center">
<nav aria-label="Page navigation " class="d-inline-b">
<div class="pagination">
<?php echo $this->pagination->create_links(); ?>
</div>
</nav>
</div>
<!--/.pagination-bar -->
<div class="post-promo text-center">
<h2> Make a free account to post a add </h2>
<h5>Fast and easy</h5>
<a href="<?php echo base_url();?>posts/create" class="btn btn-lg btn-border btn-post btn-danger">Post a Free listing now</a>
</div>
<!--/.post-promo-->
</div>
<!--/.page-content-->
</div>
</div>
<!-- /.main-container -->
</div>
答案 0 :(得分：0)
老实说，我没有详细检查，通常html引导程序让人头疼。但是，我对您的情况感兴趣：CSS媒体查询。
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
您可以根据客户端的宽度和高度定义不同的CSS属性的概念。除了将css规则定义为不同的屏幕尺寸之外，您还可以定义不同的介质，例如打印介质等。这样，您可以使元素在空间很大时以某种方式显示，而在空间不那么大时以另一种方式显示。这就是引导程序的基础。玩吧。
作为旁注，我建议您尝试完全隔离有问题的代码段。我通常会尝试重新编写代码，以便仅显示问题，而不会删除所有无关的内容。这样，您可以获得更好的答案。 ;）