无法在Bootstrap

时间：2017-08-14 08:57:29

标签： html css twitter-bootstrap-3

我是Bootstrap的初学者，我还没有100％清楚地了解它的想法。然而，我很匆忙推出一个内容创意，因为我创造了这个。有人可以为我清楚一些事情，如果事情发生了变化，也许可以解释一下真正改变了什么？

我已经将下面的图片链接到了现在的结构模式。

根据要求，我现在正在解释图片中的文字。

请参阅“语言”下拉菜单？当设备全屏时，我希望那个位于右上角。但是当设备在SM或XS等较小的设备上时，它应该转移到菜单按钮的扩展菜单中。

我也希望整个导航栏能够自己居中，好像将一块带有文字的混凝土移动到另一个位置。

如果可以将徽标/横幅内容与页面大小一起调整，那也很好。例如：在移动设备上，它会切断图片上的侧边栏，然后缩小图片比例。 Bootstrap应该有这个，但我不知道如何使用它。

真诚地感谢您的帮助。

PS：不要评论容器，标题等杂乱的代码混乱。我知道它可能不正确。我搞清楚了。感谢您的关注！

http://imgur.com/a/exA71 

.bg-irie {
    background-color: #E7DD96; 
}

.bg-irie2 {
    background-color: #41403E;
}

.header-advertisement {
    height:320px;
}
<html>
    <head>
        <link rel="icon" type="image/png" href="/src/img/favicon.png" />
        <link rel="stylesheet" href="/src/css/main.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <title>Irie Vibes Roots Festival - Home</title>     
    </head>
    <body class="bg-irie">
        <header class="text-center">

            <div class="container-fullwidth bg-irie2">
                <div class="header-advertisement ">
                <img src="http://i.imgur.com/BUu5PPO.png">
                </div>
                <div class="container">
                    <nav class="navbar navbar-expand-lg navbar-light bg-irie2">
                        <a class="navbar-brand" href="#">Irie Vibes</a>
                        <!--Menu button for small screens-->
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNavDropdown">
                            <ul class="navbar-nav">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Features</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Pricing</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </li>
                            </ul>                        
                        </div>
                    </nav>
                </div>
            </div>
        </header>
        <div class="container">

            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>

        </div>
    </body>
    <!--Loading scripts at the end of the page to prevent slowdowns-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>

2 个答案:

答案 0 :(得分：1)

试试这个..

新编辑并更改语言下拉列表的宽度并按照您的说法进行操作，

并将绝对位置设置为根据z-index值

使图层为独立 

.bg-irie {
    background-color: #E7DD96; 
}

.bg-irie2 {
    background-color: #41403E;
}
#navbarDropdownMenuLink, .dropdown-menu{
  text-align: right;
  width: 20%;
  float: right;
  color:#fff
}
#navbarNavDropdown{
  text-align: center
}
.dropdown-menu{
  position: absolute;
  right: 0 !important;
}
.header-advertisement {
    height:320px;
}
.navbar{
  display: inline-block; !important
}
<html>
    <head>
      
        <link rel="icon" type="image/png" href="/src/img/favicon.png" />
        <link rel="stylesheet" href="/src/css/main.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <title>Irie Vibes Roots Festival - Home</title>     

    <body class="bg-irie">
       <header class="text-center">
    <a class="nav-link dropdown-toggle pull-right" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Language</a>
     
                                    <div class="dropdown-menu pull-right" aria-labelledby="navbarDropdownMenuLink">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
            <div class="container-fullwidth bg-irie2">
                <div class="header-advertisement ">
                <img src="http://i.imgur.com/BUu5PPO.png">
                </div>
                <div class="container"> <center>
                    <nav style="display: inline-block" class="navbar navbar-expand-lg navbar-light bg-irie2">
                   
                        <a class="navbar-brand" href="#">Irie Vibes</a>
                        <!--Menu button for small screens-->
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNavDropdown">
                            <ul class="navbar-nav">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Features</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Pricing</a>
                                </li>
                                <li class="nav-item dropdown">
                                    

                                </li>
                            </ul>                        
                        </div>
                     
                    </nav>
                       </center>
                </div>
            </div>
        </header>
        <div class="container">

            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>
            <div class="row">
                <div class="col-sm-4">1</div>
                <div class="col-sm-4">2</div>
                <div class="col-sm-4">3</div>
            </div>

        </div>
    </body>
    <!--Loading scripts at the end of the page to prevent slowdowns-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</html>

答案 1 :(得分：0)

试试这个横幅

为图片添加ID。

<img id="BUu" src="http://i.imgur.com/BUu5PPO.png">
</div>

然后，将其添加到您的CSS 

.header-advertisement {
    /* height: 320px; */
    width: 80%;
    margin: auto;
}

#BUu {
  width: 80%;
}
相关问题
最新问题