JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-sam-main" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand navbar-left" href="" title="aaaa">
MySite
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-mycol">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav navbar-left" id="myContent1">
<li class="dropdown" id="users">
<span>
<a class="navbar-brand" href="" title="aaa" style="display:inline-block;padding-right:0px;">
<img src="" width="24" height="24" alt="aaaa">
MyName
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#users" style="display:inline-block;padding-left:0px;">
<b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999;"></b>
</a>
</span>
<ul class="dropdown-menu">
<li><a href=""><img src="" width="24" height="30"/> OtherName</a></li>
<li class="divider"></li>
<li><a href="">AAAA</a></li>
<li><a href="">BBB</a></li>
</ul>
</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-mycol">
<ul class="nav navbar-nav navbar-right">
<li><a href="">UUUU</a></li>
<li><a href="">YYYYY</a></li>
<li class="dropdown" id="wer">
<a class="dropdown-toggle" data-toggle="dropdown" href="#wer">Tools
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="">aaaa</a></li>
<li><a href="">bbbb</a></li>
<li><a...