Question

即时为我的页面上的社交媒体图标和链接创建一个小菜单/面板。我使用bootstrap和font-awesome。图标完美，但不是链接（如禁用）。但是当我把一个btn-primary作为链接放在它下面时它确实有效。下面是包含btn主要内容的html：包含标题的完整代码。

    <!DOCTYPE html>
    <html>
      <head>
        <title>About</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link rel="stylesheet" href="style.css" type="text/css" media="screen">
        <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

      </head>

      <body>

<div class = "container">

    <div class="row">
    <div class="col-md-8"><img src="Red_Feather_Rogers_supplyf.gif"></div>
    <div class="col-md-4"><a class ="btn" href="https://www.facebook.com" ><i class="icon-facebook-sign icon-3x"></i></a></div>
    <!--<a href="https://www.facebook.com" class="btn btn-large btn-primary">Primary link</a>-->

    <div class="navbar">
    <div class="container"> 

  <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

  <!-- Be sure to leave the brand out there if you want it shown -->
     <!-- <a class="navbar-brand" href="#">Rogers Cowboy Supply</a> -->
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="#">Whats New</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Directions</a></li>

            <li class="disabled"><a href="#">Disabled</a></li>
          </ul>
      <!-- Place everything within .nav-collapse to hide it until above 768px -->
        <div class="nav-collapse collapse navbar-responsive-collapse">

      </div><!-- /.nav-collapse -->
   </div>
 </div><!-- /.navbar -->

    <h2> Title</h2>

 <p>text </p>

 <p>
 text
</p>

<p>
 Text
 </p>
          <div class="inner-item">
            <img src="images/1.jpg" alt="family">
          </div>






</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

heres style.css

   .inner-item {
text-align: center;
img {
margin: 0 auto;}
        }

bootstrap按钮链接不起作用，仅当我有另一个按钮时才有效

0 个答案: