Bootstrap 居中菜单元素
Bootstrap centering menu element
我在 md 和 sm 视图中将徽标和菜单居中时遇到问题。
我想在菜单中为 brandlogo 和 li 的边距设置动画,这样边距自动和绝对位置是 nogo
TransformX 和 col-offset 有点居中但像素不完美,当动画边缘时徽标和菜单不会保持居中。
<nav class="navbar navbar-default navbar-fixed-top container menufix">
<div class="row row-eq-height" id="rowmenu">
<div class="row row-eq-height-resp">
<!-- Brand Logo -->
<div class="col-xs-10 col-sm-12 col-md-12 col-lg-12">
<a class="navbar-brand" id="brand-logo" href="#">
<img alt="BrandLogo" class="brandlogo" src="/wp-content/themes/kdproduction/logo.png">
</a>
</div>
<!-- Brand and toggle - mobile display -->
<div class="col-xs-2 hidden-lg hidden-md hidden-sm">
<button type="button" class="btn-resp-style" data-toggle="collapse" data-target=".navbar-collapse">SVG</button>
</div>
</div>
<!-- Main Top nav -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8" >
<div class="navbar-collapse collapse">
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'container' => false,
'menu_id' => 'kdnavmenulista',
'menu_class' => 'nav navbar-nav navbar-header kdnavmenulista'
));
?>
</div><!-- /.navbar-collapse -->
</div>
</div>
</nav><!-- /.container -->
而不是这个:
<a class="navbar-brand" id="brand-logo" href="#">
<img alt="BrandLogo" class="brandlogo" src="/wp-content/themes/kdproduction/logo.png">
</a>
试着把这个:
<div style="width:100%; display:flex; justify-content:center; align-items:center;">
<a class="navbar-brand" id="brand-logo" href="#">
<img alt="BrandLogo" class="brandlogo" src="/wp-content/themes/kdproduction/logo.png">
</a>
</div>
让我知道它是否有效。
我在 md 和 sm 视图中将徽标和菜单居中时遇到问题。
我想在菜单中为 brandlogo 和 li 的边距设置动画,这样边距自动和绝对位置是 nogo
TransformX 和 col-offset 有点居中但像素不完美,当动画边缘时徽标和菜单不会保持居中。
<nav class="navbar navbar-default navbar-fixed-top container menufix">
<div class="row row-eq-height" id="rowmenu">
<div class="row row-eq-height-resp">
<!-- Brand Logo -->
<div class="col-xs-10 col-sm-12 col-md-12 col-lg-12">
<a class="navbar-brand" id="brand-logo" href="#">
<img alt="BrandLogo" class="brandlogo" src="/wp-content/themes/kdproduction/logo.png">
</a>
</div>
<!-- Brand and toggle - mobile display -->
<div class="col-xs-2 hidden-lg hidden-md hidden-sm">
<button type="button" class="btn-resp-style" data-toggle="collapse" data-target=".navbar-collapse">SVG</button>
</div>
</div>
<!-- Main Top nav -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8" >
<div class="navbar-collapse collapse">
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'container' => false,
'menu_id' => 'kdnavmenulista',
'menu_class' => 'nav navbar-nav navbar-header kdnavmenulista'
));
?>
</div><!-- /.navbar-collapse -->
</div>
</div>
</nav><!-- /.container -->
而不是这个:
<a class="navbar-brand" id="brand-logo" href="#">
<img alt="BrandLogo" class="brandlogo" src="/wp-content/themes/kdproduction/logo.png">
</a>
试着把这个:
<div style="width:100%; display:flex; justify-content:center; align-items:center;">
<a class="navbar-brand" id="brand-logo" href="#">
<img alt="BrandLogo" class="brandlogo" src="/wp-content/themes/kdproduction/logo.png">
</a>
</div>
让我知道它是否有效。