css - 当屏幕超过 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 中得到解决。

请参阅下面的评论以进行说明。