javascript - 使用谷歌翻译 CSS 的 Bootstrap 菜单栏

Question

我遇到了一个 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 &amp; 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 ===-->

Answer 1

您可以使用 white-space: nowrap 但是您需要确保它适合不同的断点，因为根据您的要求，它不再换行以适合。

.header-links {
  white-space: nowrap;
}

添加后，只需使用您的媒体查询通过不同的断点进行调整以获得您想要的外观/风格。使用媒体查询在 860 像素屏幕宽度下进行样式调整的示例如下:

@media only screen and (max-width: 859px) {
    .header-links li {
        padding-right: 2px;
        padding-left: 2px;
    }
    .header-links a {
        font-size: 13px;
    }
}