Question

我创建了一个bootstrap project。团队成员用图标创建了导航栏，但这是我们第一次使用Bootstrap。

虽然一切都在工作，但我们遇到的问题是文字没有以图标为中心，当你将鼠标悬停在它上面时，联系我们和Contribute上的文字会挂出“框”

正在使用媒体查询来重新调整图标大小，但即使我删除了媒体查询样式，文本也会挂出“框”

有关如何解决此错误的任何建议吗？

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Kent Food Bank & Emergency Services</title>



<!-- Bootstrap Core CSS -->
<link href="http://teambinary.greenrivertech.net/readable_css/bootstrap.css" rel="stylesheet">
<link href="http://teambinary.greenrivertech.net/readable_css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!-- Custom CSS -->
<link href="http://teambinary.greenrivertech.net/styles.css" rel="stylesheet">


<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<div class="container head">
  <!---Top of the page-->

<div class="row">
    <div  class="col-xs-12 hidden-sm col-md-3 col-lg-3 col-xl-3">
        <div class="col-xs-12">
        <a href="index.php" class="navbar-brand" >
            <img id="logo" class="img-responsive"  alt="This is the logo" src="http://teambinary.greenrivertech.net/images/logo-transparent.png" >
        </a>
        </div>
    </div>

  <div class="col-xs-12 col-sm-10 col-md-8 navbar center-block" >
      <!--Centers Nav On Headers-->

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navHeaderCollapse">Menu<span class="caret"></span></button>
        <div class="collapse navbar-collapse" id="navHeaderCollapse">
          <ul class="nav navbar-nav">
              <li class="nav  col-sm-2 col-md-2 col-lg-2 col-xl-2 text-center ">
                    <p><a class="text-center col-xs-12 nav-fonts" href="index.php">
                            <span class="text-center icon-in-nav fa fa-home fa-3x"></span>
                            <br />Home</span>
                    </a></p>
                </li>
              <li class="nav  col-sm-2 col-md-2 col-lg-2 col-xl-2 text-center">
                    <p><a class="text-center col-xs-12 nav-fonts" href="contribute.php">
                            <span class="text-center icon-in-nav fa fa-users fa-3x"></span>
                            <br />Contribute
                    </a></p>
                </li>
              <li class="nav  col-sm-2 col-md-2 col-lg-2 col-xl-2 text-center">
                    <p><a class="text-center col-xs-12 nav-fonts" href="gethelp.php">
                            <span class="text-center icon-in-nav fa fa-cutlery fa-3x"></span>
                            <br />Get&nbsp;Help
                    </a></p>
                </li>
              <li class="nav  col-sm-2 col-md-2 col-lg-2 col-xl-2 text-center">
                    <p><a class="text-center col-xs-12 nav-fonts" href="calendar.php">
                            <span class="text-center icon-in-nav fa fa-calendar fa-3x"></span>
                            <br />Calendar
                    </a></p>
                </li>
              <li class="nav  col-sm-2 col-md-2 col-lg-2 col-xl-2 text-center">
                    <p><a class="text-center col-xs-12 nav-fonts" href="location.php">
                            <span class="text-center icon-in-nav fa fa-map-marker fa-3x"></span>
                            <br />Location</a></p>
                    </li>
              <li class="nav  col-sm-2 col-md-2 col-lg-2 col-xl-2 text-center">
                    <p><a class="text-center col-xs-12 nav-fonts" href="contactus.php">
                            <span class="text-center icon-in-nav fa fa-phone-square fa-3x"></span>
                            <br />Contact&nbsp;Us
                    </a></p>
                </li>
          </ul>

      </div>
</div>


<div class="hidden-xs col-sm-2 col-md-1 ">


    <!--Paypal Donate Button-->
    <div style="width: auto">
        <form action="https://www.paypal.com/cgi-bin/webscr (Links to an external site.)" method="post" target="_top">

        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="HPNP9YXHUXN4G">
        <input type="image"   class="img-responsive" src="http://teambinary.greenrivertech.net/images/paypaldonate.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
         <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

        </form>
    </div>
</div>

</div>

<div class="row">
  <div class="row col-md-12 col-sm-12"><hr class="col-md-12 col-sm-12 hidden-xs"></div>
</div>
<div class="row">
  <div id="motto" class="pull-right"><p>Serving low-income residents of the Kent School District</p></div>

</div>
 </div>
   <script>
  //This javascript manipulates the logo size.
    $(document).ready(function(){
      var windowWidth = $(document).width();
      var imageSize = windowWidth/4;

      if(windowWidth > 767){
        $("#logo").css("width", imageSize + "px");
    }else{
        $("#logo").css("width", "100%");
    }

    });

      $(window).resize(function(){
        var windowWidth = $(document).width();
        var imageSize = windowWidth/4;

        if(windowWidth > 767){
          $("#logo").css("width", imageSize + "px");
      }else{
          $("#logo").css("width", "100%");
      }

    });


  </script>

Answer 1

也许尝试 1）扩展每个部分的内容（col-md-3 - ＆gt; 4）

2）你也可以尝试使用它：（.col-md-offset-3）

这是我遇到的唯一一个。

Bootstrap导航悬停颜色太窄

1 个答案: