个人中心
gpt4 book ai didi

jquery - CSS Bootstrap 4 导航到右侧

转载 作者：太空宇宙 更新时间：2023-11-04 06:49:57 26 4
gpt4 key购买 nike

我尝试了很多东西，但不知道如何创建像下面第一张图片那样的东西。

我希望导航在右侧，内容在左侧，如下图所示，但它必须是响应式的。我能够做到，但我卡在了某些部分，想知道如何去做。就像我的没有完全响应一样，我希望导航在我的示例右侧有自己的区域，内容区域(文本)与导航区域重叠，如第二张图片所示，点击后折叠导航会转到左侧移动尺寸希望这里有人知道如何做，请帮忙!

这就是我想要的

this is what I try to get

这是我想出来的

example image

点击后折叠向左移动如何解决这个问题？

enter image description here

代码

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

h2 {
  color: red;
}

ul {
  list-style: none;
}

nav {
  float: right;
}

.navbar-toggler {
  color: #000 !important;
}

.navbar-dark .navbar-toggler {
  border-color: transparent !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<html>

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
</head>

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
               <span class="fas fa-bars"></span>

            </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="">
        nav here
        <li class="nav-item active">
          <a class="nav-link" href="#">nav1 <span class="sr-only"></span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">nav2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">nav3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">nav4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">nav5</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

<body>
  <div class="container-fluid">

    <h2>please make also the window smaller to see it on mobile size it has to be repsonive</h2>
    <a href="/image/WV0ZN.png" target="_blank">and look like the image here.</a>
    <br><br>
    <h1>Content</h1>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores enim quisquam ab! Pariatur rerum, saepe ab ex voluptate fugiat excepturi fugit libero placeat nulla praesentium, amet nobis error est vel aperiam harum sunt illum, perspiciatis laudantium
      tenetur soluta! Dignissimos rerum qui ipsa, earum eaque deleniti quaerat nostrum ab veniam nam doloribus quod delectus nisi, sint, aperiam provident, voluptate labore pariatur vero voluptas! Perspiciatis sunt temporibus debitis quae aliquid sint,
      atque a dicta aperiam ullam dolores tempore eligendi nemo perferendis commodi. Exercitationem aliquam quos error pariatur hic natus quaerat, ad voluptate reiciendis alias dolor! Voluptatem ullam facere nostrum illum quas excepturi, suscipit a molestiae
      eaque tenetur quos quibusdam optio eveniet repudiandae incidunt necessitatibus laborum temporibus fugit ipsam distinctio sunt adipisci, esse. Hic nemo minus alias temporibus saepe ab vel, officia praesentium soluta commodi totam minima perferendis
      fugiat! Delectus, iste at ipsam rerum sint itaque perspiciatis sed quibusdam alias maiores minus cumque reiciendis quas debitis harum nesciunt nobis vitae consequatur iure enim magnam unde deleniti minima velit. Labore rem pariatur qui in recusandae
      autem cupiditate praesentium animi, facilis ipsam tenetur facere soluta quos eligendi similique commodi sint ad aliquid velit ipsum debitis amet tempore? Modi illo suscipit earum non quaerat minus voluptatibus enim recusandae fugit voluptas, pariatur
      architecto accusantium quam iusto ullam omnis ducimus odio ipsum, molestias nihil cum quas eum. Necessitatibus vitae, odit eligendi quos nam animi illo reiciendis aperiam et, nulla. A error, facere excepturi, quidem omnis eveniet vel voluptatum
      repellat mollitia eius et. Aliquid temporibus quidem, sed suscipit quo possimus, incidunt, voluptatem sequi tempore esse praesentium! Laudantium voluptates, sed aut! Dolore inventore reiciendis itaque. Hic ab delectus quos expedita odit aliquid
      provident ea, consequuntur. Eligendi neque voluptatum modi eaque inventore totam quidem impedit, doloremque deserunt officia, corporis porro ut numquam, error rerum eius fugiat consequatur in eum, dolores odit nihil. Voluptatibus optio, vero magni
      corporis officia, nostrum alias aliquid nesciunt ea distinctio libero iste necessitatibus dolorem sequi doloremque ipsa reiciendis exercitationem numquam fugit aperiam quaerat, nisi veniam! Repellendus, labore expedita libero rem delectus veniam
      quidem ducimus non perferendis, amet obcaecati eligendi reiciendis laborum, corrupti, quaerat illo ratione. Ipsa unde tempora accusantium dolor, neque enim quia saepe labore aliquid illo temporibus earum aliquam necessitatibus voluptatibus in repellat
      voluptatem dicta similique modi quasi? Similique placeat ex obcaecati saepe, voluptatum numquam animi expedita perspiciatis iste vero sed soluta, repudiandae consectetur blanditiis nisi aut voluptates ipsa, distinctio quas totam necessitatibus quasi.
      Natus voluptates deserunt esse expedita assumenda similique cupiditate, explicabo fugiat aut, quibusdam deleniti. Tempore repudiandae libero neque, quas dolorum voluptatibus. Expedita corporis cumque, facilis consequatur aut, sed rerum dolor at
      beatae sequi culpa quam? A molestias dolorem, fugiat optio, accusantium, inventore molestiae obcaecati non quo sit id corporis itaque voluptatum perferendis accusamus adipisci soluta cumque. Delectus, nihil. Enim ab debitis et, consectetur nisi
      inventore nostrum deserunt porro dolorum, maxime repudiandae deleniti in, unde laboriosam, recusandae ducimus amet obcaecati eveniet. Ratione praesentium molestiae in corrupti voluptatem reiciendis fugiat. Omnis eligendi aperiam, ratione ab tempore
      quas inventore in laboriosam similique accusantium, distinctio commodi dignissimos!
    </div>
  </div>
</body>

</html>

最佳答案

这是一个帮助您入门的简单示例。请注意用于将 div 左右定位的内容和导航部分中使用的类。

.content-container {
  background-color: #f4f4f4;
  padding: 10px;
}

.nav-container {
  background-color: #e9ecef;
  padding: 10px 30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" />

<div class="container-fluid">

  <div class="d-flex flex-row">

    <div class="content-container justify-content-start">

      <h1>CSS Bootstrap 4 Navigation to right side demo</h1>

      <a href="https://stackoverflow.com/questions/52955684/css-bootstrap-4-navigation-to-right-side" target="_blank">https://stackoverflow.com/questions/52955684/css-bootstrap-4-navigation-to-right-side</a>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus urna neque viverra justo nec. Tellus cras adipiscing enim eu turpis egestas pretium aenean pharetra. At consectetur
        lorem donec massa sapien faucibus et molestie ac. Elementum eu facilisis sed odio morbi. Ut eu sem integer vitae justo eget magna. Tortor aliquam nulla facilisi cras fermentum odio. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae.
        Ornare arcu dui vivamus arcu felis bibendum ut tristique. Porta non pulvinar neque laoreet suspendisse interdum.</p>
    </div>

    <nav class="nav-container justify-content-end align-items-start navbar-expand-lg">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
					<span class="fas fa-bars"></span>
				</button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul>
          <li>link</li>
          <li>link</li>
          <li>link</li>
          <li>link</li>
          <li>link</li>
        </ul>
      </div>
    </nav>
  </div>

</div>

关于jquery - CSS Bootstrap 4 导航到右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52955684/

26 4 0
文章推荐： java - ImagePanel 未显示在我的带有 netbeans 的 jar 文件中
文章推荐： c - 在 main 之前声明数组
文章推荐： java - 我收到变量 isOperator 的编译错误是什么？
文章推荐： Java 相当于 C 中的 fscanf
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com