我遇到了一个问题，我的导航栏没有扩展到它应该的全长。下面是我的CSS代码和HTML/PHP。
<标题> CSS h1><header id="masthead" class="site-header container-fluid" role="banner">
<div class="site-branding">
<?php if (get_theme_mod(FT_scope::tool()->optionsName . '_logo', '') != '') { ?>
<h1 class="site-title logo"><a class="mylogo" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><img relWidth="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxWidth', 0)); ?>" relHeight="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxHeight', 0)); ?>" id="ft_logo" src="<?php echo get_theme_mod(FT_scope::tool()->optionsName . '_logo', ''); ?>" alt="" /></a></h1>
<?php } else { ?>
<h1 class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php } ?>
</div>
<div class="mainmenu" >
<div class="mobilenavi row col-12" style="width:100%;"></div>
<?php wp_nav_menu( array( 'container_id' => 'submenu', 'theme_location' => 'primary','container_class' => 'topmenu','menu_id'=>'topmenu' ,'menu_class'=>'sfmenu' ) ); ?>
</div>
<span class="header-social">
<!-- SOCIAL MEDIA ICONS -->
<img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/facebook.png' ">
<img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/instagram.png' ">
<img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/pinterest.png' ">
<img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/twitter.png' ">
<img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/youtube.png' ">
<img src='<?php bloginfo('siteurl');?>/wp-content/uploads/social_images/email.png' ">
</span>
</div>
</header><!-- #masthead -->
顺便说一下，我使用wordpress，所以菜单是通过wordpress而不是html填充的。下面是正在发生的事情的屏幕截图:
你正在扩展"mobilenavi row color -12"到"mainmenu"宽度的100%，对吗?-如果是这样，这只是750px。
如果你想扩展它超过这个宽度，添加到:
.mobilenavi row col-12{
position: absolute;
}
你是这个意思吗?
看起来.mobilenavi row col-12仅用于移动设备，但大小受到mainmenu的最大宽度(750px)的限制，对于移动设备或平板电脑来说似乎是相当大的最大值。媒体查询可以添加到CSS中，以满足不同的屏幕尺寸，mainmenu的宽度可以根据不同的屏幕尺寸而不同，或者您可以将mainmenu的宽度设置为100%。
如果你想为不同的屏幕尺寸使用不同的宽度，把这个添加到你的CSS的末尾:
@media only screen and (max-device-width: 750px) {
mainmenu { width: 750px}
}
@media only screen and (max-device-width: 400px) {
mainmenu { width: 400px}
}
@media only screen and (min-device-width: 751px) {
mainmenu { width: 1200px}
}