个人中心
gpt4 book ai didi

html - Jumbotron 破坏了移动网站上的导航栏

转载 作者：行者123 更新时间：2023-11-27 23:43:56 24 4
gpt4 key购买 nike

Bootstrap Jumbotrons 在我的网站上超出了容器，这意味着移动版本上的导航栏没有填满屏幕。我没有超大屏幕的其他页面不会出现此问题。

我尝试使用卡片代替，但是当我把它放在文本以外的任何东西时会出现一些问题

<div class="row">
    <div class="jumbotron col-lg-8 col-md-12"
        style='margin-left: 15px; margin-top: 15px; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px;'>
        <h1 class="display-3">
            <b>Welcome to SkyWars.fun</b>
        </h1>
        <p class="lead">We focus on updating regularly, and we listen close to
            our community suggestions.</p>
        <hr class="my-4">
        <p>We have a perk system, comparable with kits or abillities. Any
            player can enable 3 perks at once. These perks give small advantages
            for your gameplay. Choose wisely, and adapt with your perks! Happy
            SkyWars! And have fun!</p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="../tips" role="button">Tips
                and tricks</a>
        </p>
    </div>
</div>

还有导航栏

<nav class="navbar navbar-expand-lg navbar-dark bg-primary" role="navigation">
    <a class="navbar-brand" href="../">IP: SkyWars.fun</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
        data-target="#navbarColor01" aria-controls="navbarColor01"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li
                class="nav-item <?php if($_SERVER['REQUEST_URI'] === '/') echo 'active' ?>"><a
                class="nav-link" href="https://www.skywars.fun/" title="Go to the main page">Home </a></li>
            <li class="nav-item <?php if(isPage('/about/')) echo 'active' ?>"><a
                class="nav-link" href="https://www.skywars.fun/about" title="Information about SkyWars.fun">About</a></li>
            <li class="nav-item <?php if(isPage('/tips/')) echo 'active' ?>"><a
                class="nav-link" href="https://www.skywars.fun/tips" title="Tips and Tricks">Tips</a></li>
            <li class="nav-item <?php if(isPage('/donate/')) echo 'active' ?>"><a
                class="nav-link" href="https://www.skywars.fun/donate" title="Donate">Donate</a></li>
            <li class="nav-item <?php if(isPage('/search/')) echo 'active' ?>"><a
                class="nav-link" href="https://www.skywars.fun/search" title="Leaderboard">Leaderboard</a></li>
        </ul>
        <form class="form-inline my-2 my-lg-0" action="../search" title="Lookup player">
            <input class="form-control mr-sm-2" type="text" name="player"
                placeholder="Search player">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

问题图片

https://drive.google.com/file/d/0ByAYcnq6pPDmNlJsUUNBbkM1aFRITEQ5TUF4U0JxWXpOYVBV/view?usp=sharing https://drive.google.com/file/d/0ByAYcnq6pPDmcnVsbTNMbkI2MnlNdmZocmtXV0FWbXpmUTdN/view?usp=sharing

最佳答案 

* {
   margin: 0;
   padding: 0;
}

.banner {
    background: #e9ecef;
}

@media only screen and (max-width: 767px) {
.display-3 {
    font-size: 2rem !important;
}
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary" role="navigation">
      <a class="navbar-brand" href="../">IP: SkyWars.fun</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse"
        data-target="#navbarColor01" aria-controls="navbarColor01"
        aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
          <li
            class="nav-item <?php if($_SERVER['REQUEST_URI'] === '/') echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/" title="Go to the main page">Home </a></li>
          <li class="nav-item <?php if(isPage('/about/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/about" title="Information about SkyWars.fun">About</a></li>
          <li class="nav-item <?php if(isPage('/tips/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/tips" title="Tips and Tricks">Tips</a></li>
          <li class="nav-item <?php if(isPage('/donate/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/donate" title="Donate">Donate</a></li>
          <li class="nav-item <?php if(isPage('/search/')) echo 'active' ?>"><a class="nav-link" href="https://www.skywars.fun/search" title="Leaderboard">Leaderboard</a></li>
        </ul>
        <form class="form-inline my-2 my-lg-0" action="../search" title="Lookup player">
          <input class="form-control mr-sm-2" type="text" name="player"
            placeholder="Search player">
          <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
    <section class="banner">
      <div class="container-fluid">
          <div class="row">
            <div class="col-12">
              <div class="jumbotron">
                <h1 class="display-3">
                  <b>Welcome to SkyWars.fun</b>
                </h1>
                <p class="lead">We focus on updating regularly, and we listen close to
                  our community suggestions.
                </p>
                <hr class="my-4">
                <p>We have a perk system, comparable with kits or abillities. Any
                  player can enable 3 perks at once. These perks give small advantages
                  for your gameplay. Choose wisely, and adapt with your perks! Happy
                  SkyWars! And have fun!
                </p>
                <p class="lead">
                  <a class="btn btn-primary btn-lg" href="../tips" role="button">Tips
                  and tricks</a>
                </p>
              </div>
            </div>
        </div>
      </div>
    </section>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

我已经减小了小型设备的字体大小，它正在脱离容器。在使用主类之前，还可以使用 .container > .row > .col-lg-12 [just for example]。引用 https://getbootstrap.com/docs/4.1/layout/grid/这个链接。希望能解决你的问题

关于html - Jumbotron 破坏了移动网站上的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56894726/

24 4 0
文章推荐： javascript - 使 SVG 图标出现在 JS 待办事项列表项上
文章推荐： javascript - 使用 ES6 时出现未知提供者错误
文章推荐： html - 文本省略号不适用于列 flexbox self
文章推荐： php - 如何使用 CodeIgniter 添加 .png 图像作为链接的背景