【发布时间】：2015-12-11 02:27:43
【问题描述】：
我遇到了一个 css 问题，因为屏幕的宽度变小了，请有人告诉我如何调整我的菜单栏。我在我的菜单栏中使用谷歌翻译，但我遇到的问题是当屏幕是全尺寸时，当你开始移动屏幕以使其更小时，谷歌翻译开始下降到另一个级别，使所有其他下拉菜单由于谷歌翻译干扰，菜单栏无法正常工作。
有没有办法让谷歌翻译按钮保持内联或在菜单栏上而不掉到另一行？
或者甚至让谷歌翻译的宽度不那么宽，看看它是否会保持在同一行？
任何帮助将不胜感激！
http://jsfiddle.net/bobrierton/5c1vbo2s/11/
.goog-te-gadget .goog-te-combo {
margin: 0px 0px;
}
.goog-logo-link {
display:none !important;
}
.goog-te-gadget{
color: transparent !important;
font-size:0px;
}
.goog-te-combo {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #687074;
text-transform: uppercase;
cursor:pointer;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--=== Header v4 ===-->
<div class="header-v4">
<!-- Navbar -->
<div class="navbar navbar-default mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="row">
<div class="col-md-7">
<a class="navbar-brand" href="index.html">
<img id="logo-header" src="assets/img/logo-header.png" alt="Logo">
<img id="logo-header" src="assets/img/logo-text.png" alt="Logo text">
</a>
</div>
<div class="col-md-5 header-right">
<div class="social margin-bottom-10">
<ul class="header-links list-inline">
<li><a href="#" data-original-title="" class="">Apple Store</a></li>
<li><a href="#" data-original-title="" class="">Google Play</a></li>
</ul>
<ul class="social-icons social-icons-color">
<li><a href="#" data-original-title="Facebook" class="rounded-x social_facebook"></a></li>
<li><a href="#" data-original-title="Twitter" class="rounded-x social_twitter"></a></li>
<li><a href="#" data-original-title="Youtube" class="rounded-x social_youtube"></a></li>
</ul>
</div>
<button class="btn-u btn-u-lg" type="button"><i class="fa fa-cc-mastercard"></i> Pay Online</button>
<button class="btn-u btn-u-red btn-u-lg" type="button"><i class="fa fa-calendar"></i> Make An Appointment</button>
</div>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="full-width-menu">Menu Bar</span>
<span class="icon-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</button>
</div>
</div>
<div class="clearfix"></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="active">
<a href="index.html" class="" data-toggle="">
Home
</a>
</li>
<!-- End Home -->
<!-- Driver License -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Driver License
</a>
<ul class="dropdown-menu">
<li class=""><a href="sidebar-page.html">General Information</a></li>
<li><a href="full-width-page.html">Online Services</a></li>
<li><a href="full-width-page.html">Fees</a></li>
<li><a href="full-width-page.html">Forms</a></li>
</ul>
</li>
<!-- End Pages -->
<!-- Motor Vehicles -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Motor Vehicle
</a>
<ul class="dropdown-menu">
<li class=""><a href="sidebar-page.html">General Information</a></li>
<li><a href="full-width-page.html">Online Services</a></li>
<li><a href="full-width-page.html">Sales Tax</a></li>
<li><a href="full-width-page.html">Fees</a></li>
<li><a href="full-width-page.html">Forms</a></li>
<li><a href="full-width-page.html">Title By Mail</a></li>
</ul>
</li>
<!-- End -->
<!-- Features -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Property Tax
</a>
<ul class="dropdown-menu">
<li class=""><a href="sidebar-page.html">General Information</a></li>
<li><a href="full-width-page.html">Lookup/Pay Online</a></li>
<li><a href="full-width-page.html">Tax Certificates</a></li>
<li><a href="full-width-page.html">Discount Periods</a></li>
<li><a href="full-width-page.html">Instalment Options</a></li>
<li><a href="full-width-page.html">Forms</a></li>
</ul>
</li>
<!-- End Features -->
<!-- TDT -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Tourist Tax
</a>
<ul class="dropdown-menu">
<li class=""><a href="sidebar-page.html">General Information</a></li>
<li><a href="full-width-page.html">Pay Online</a></li>
<li><a href="full-width-page.html">Online Account Management</a></li>
<li><a href="full-width-page.html">Collection Reports</a></li>
</ul>
</li>
<!-- Ens -->
<!-- Additional Services -->
<li class="dropdown">
<a href="full-width-page.html" class="dropdown-toggle" data-toggle="dropdown">
Additional Services
</a>
<ul class="dropdown-menu">
<li class=""><a href="sidebar-page.html">Parking Permits</a></li>
<li><a href="full-width-page.html">Hunting & Fishing</a></li>
</ul>
</li>
<!-- End -->
<!-- Contacts -->
<li class="">
<a href="contact.html" class="">
Contact Us
</a>
</li>
<!-- End Contacts -->
</ul>
<!-- Nav Bar Right Block -->
<ul class="nav navbar-nav navbar-border-bottom navbar-right">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</ul>
<!-- End Nav Bar Right Block -->
</div><!--/end container-->
</div><!--/navbar-collapse-->
</div>
<!-- End Navbar -->
</div>
<!--=== End Header v4 ===-->【问题讨论】：
标签： javascript jquery html css twitter-bootstrap