#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Ниже то, что я пробовал.
<ul class="navbar-nav navbar-right">
<li class="dropdown">
<li class="divider-vertical"></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<label class="navbar-text" style="margin-top: 5px">
<strong><h4>Shane<b class="caret" style="margin-left: 80px"></b></label></h4></strong>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</li>
</ul>
Я просто не уверен, как отобразить значок, как на изображении. Вот корзина, которую я пробовал до сих пор.
Комментарии:
1. Используйте выпадающую кнопку. Я создал то же самое для своей темы. но он не похож на ваш, но может совпадать. Он показывает изображение аватара и показывает имя пользователя и стрелку выпадающего списка. Как этот bootsnipp.com/snippets/featured/account-in-navbar
Ответ №1:
Вы должны использовать глификон, а не карат для выпадающего списка.
<b class="glyphicon glyphicon-chevron-down" style="margin-left: 80px"></b>
Вы можете удалить имя и использовать <span class="glyphicon glyphicon-user"></span> вместо него или использовать изображение (как показано в вашем макете).
Ответ №2:
Попробуйте использовать <span> и удалить H4 (он занимает всю ширину)
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<label class="navbar-text" style="margin-top: 5px">
<span><img src="image/here"/> </span>
<strong><h4>Shane<b class="caret" style="margin-left: 80px"></b></label>
У меня действительно есть рабочий код на http://www.hvac-hacks.com а вот и источник:
<!-- BEGIN User Menu (Top-Right --->
<ul class="nav navbar-nav navbar-right pull-right navbar-usermenu" >
<li class="dropdown">
<a href="#" class="dropdown-toggle dropdown-toggle-usermenu" data-toggle="dropdown" >
<span>
<span><?php echo hh_get_profile_photo(get_current_user_id(), 44); ?></span>
<span class = "header-navbar-username" >
<?php echo $current_user->user_firstname ?>
</span>
<b class="caret"></b>
</span>
</a>
<?php if (current_user_can('manage_options')) : ?>
<ul class="dropdown-menu header-dropdown-menu">
<li><a href="/"><i class="fa fa-home"></i>Home</a></li>
<li><a href="/post"><i class="fa fa-plus"></i>Post</a></li>
<li class="divider header-dropdown-menu-divider"></li>
<li class ="header-dropdown-menu-text">Admin</li>
<li><a href="/admin"><i class="fa fa-cogs"></i>Dashboard</a></li>
<?php if (is_singular()) { ?>
<li><?php edit_post_link( '<i class="fa fa-pencil"></i>Edit Post'); ?></li>
<?php } ?>
<li class="divider header-dropdown-menu-divider"></li>
<li class ="header-dropdown-menu-text">Profile</li>
<li><a href="/edit-profile"><i class="fa fa-user"></i>Edit Profile</a></li>
<li class="divider header-dropdown-menu-divider"></li>
<li><a href="<?php echo wp_logout_url( '/?loggedout=true' ); ?>" ><i class="fa fa-power-off"></i>Sign Out</a></li>
</ul>
<?php else : ?>
<ul class="dropdown-menu header-dropdown-menu">
<li><a href="/"><i class="fa fa-home"></i>Home</a></li>
<li><a href="/post"><i class="fa fa-plus"></i>Post</a></li>
<li class="divider header-dropdown-menu-divider"></li>
<li class ="header-dropdown-menu-text">Profile</li>
<li><a href="/edit-profile"><i class="fa fa-user"></i>Edit Profile</a></li>
<li class="divider header-dropdown-menu-divider"></li>
<li><a href="<?php echo wp_logout_url( '/?loggedout=true' ); ?>" ><i class="fa fa-power-off"></i>Sign Out</a></li>
</ul>
<?php endif; ?>
</li>
</ul>
<?php else : ?>
<div class="nav navbar-nav navbar-right pull-right header-login">
<button onclick="jQuery('#loginbox').show()" class="btn btn-engage" type="button" role="button">Login <b class="caret"></b></button>
</div>
<?php endif; ?>
<!-- END User Menu (Top-Right --->