Question

请在这种情况下指导我。我在下拉菜单中遇到问题。链接无法正确显示。我已经应用了每个CSS属性并尝试了很多次但是无法解决这个问题所以请帮助。

<div class="header">
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <a href="#"><img src="C:\Users\asiha\Desktop\oie_transparent.png">NEWPORTS INSTITUTE<br>OF COMMUNICATION<br>AND ECONOMICS</a>
        </div>

        <div class="col-md-5">
            <!-- Split button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default btn-md">Quick links</button>
                <button type="button" class="btn btn-default btn-md dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li class="presentation"><a href="#">Action</a></li>
                    <li class="presentation"><a href="#">Another action</a></li>
                    <li class="presentation"><a href="#">Something else here</a></li>
                </ul>
            </div>
        </div>

为此而css：

/* Header Styling */
     .header {
        width: 100%;
        height: 120px;
        background-color: black;
        color: white;
        font-family: 'Metrophobic', Arial, Serif;
        font-size: 18px;
        position: fixed;
        top: 0;
        z-index: 10;
     }

     .header img {
         width: 105px;
         height: 110px;
         float: left;
         padding-top: 10px;
     }

     .header a {
         color: white;
         text-decoration: none;
         position: relative;
         top: 20px;
         left: 10px;
     }



     .header .btn-group {
        margin-top: 30px;
        float: right; 
     }


     .header .input-group {
        margin-top: 31px;
        margin-right: 50px;
     }

     .header .form-control {
        border-style: hidden;
        border-radius: 0px;
     }


     .header .btn {
        color: white;
        background-color: rgba(51,51,51,1);
        padding: 6px 40px;
        border-radius: 0px;
        border-style: hidden;
     }

    .header .dropdown-toggle {
        background-color: rgba(140,140,140,1);
    }



    .caret {
        color: black;
    }

Answer 1

只需添加：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

并且你的代码运行得很好

bootstrap下拉菜单溢出

1 个答案: