当屏幕超过768时，导航栏右侧菜单上的类似Fb的按钮​​会挂起屏幕

Question

Bootstrap新手问题。我正在使用ZimSystem's左中右对齐导航栏的变体。我把我的品牌放在左边。

有两个看似相关的问题。

1）在大屏幕上，类似fb的按钮悬挂在页面的右侧。

2）在小屏幕上，品牌向下移动几行，以便第一个菜单项被隐藏。

我尝试在两种情况下使用绝对定位，但这并没有解决问题。

    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <!-- navbar-default removed -->
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
        </button>
      </div>
    <a class="navbar-brand navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>

<!-- Collect the nav links, forms, and other content for toggling -->
     <div class="navbar-collapse collapse">
     <ul class="nav navbar-nav navbar-center">
         <li class="nav-item"> <a class="nav-link" href="#philosophy">Our Philosophy</a> </li>
    <li class="nav-item"><a class="nav-link" href="#priceList">Price List</a>.   </li>
        <li class="nav-item"><a class="nav-link" href="#contactus">Contact Us</a>.   </li>
      </ul>

       <ul class="nav navbar-nav navbar-right">
        <div class="fb-like" data-href="http://www.kokleaners.com" data-layout="button_count" data-action="recommend" data-adapt-container-width="true" data-show-faces="false" data-share="true"></div>
      </ul>

    </div>
</nav>

CSS

@charset "UTF-8";
/* CSS Document */

html, body{
    height:100%;
}
.navbar-default {
  background-color:#72c5d5;
  border-color: #284449;
  z-index: 10;
  opacity: 0.9;
}

.nav.navbar-nav.navbar-center li a {

    color: #254053;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
    color: #EF3927;
}

这是我用于fb的代码，如定位不起作用。

@media all and (min-width:768){

        .navbar-collapse fb-like{
        position:absolute;
        right:25;

似乎这应该是一个非常简单的修复。但我很困惑。

这是bootply。

Answer 1

下次将它放在jsfiddle.net

上

用这个替换你的facebook div小部件，它应该可以解决问题。你的宽度设置得很尴尬。所以我将其更改为100％并且格式正确。

 <div class="fb-like fb_iframe_widget" data-href="http://www.kokleaners.com"  
 ... " class="" style="border: none; visibility: visible; **width: 100%**; height: 20px;"></iframe></span>

        </div>

导航栏品牌间距的问题通过将其展示位置移动到div来解决。

请参阅以下评论以获得澄清。

Answer 2

通过在自定义CSS中设置navbar-right的边距，也可以解决FB-Widget的间距。

.navbar-right{
margin-top: 20px;
margin-right:20px;
}

要改善小屏幕上的布局，请向上移动navbar-brand：

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button>
<a class="navbar-brand navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>
  </div>