问题描述

我尝试了很多东西，但不知道如何创建类似于下面第一张图片的内容。

这是我尝试过的：https ://codepen.io/codyHi/pen/EddyMY?editors=1100

我希望右侧有导航，左侧有如下图所示的内容，但它必须是响应式的。我能够做到，但我卡在某些部分，想知道该怎么做。就像我的没有完全响应我希望导航在我的示例的右侧有自己的区域内容区域（文本）与第二张图像中的导航区域重叠，并且折叠导航在单击后转到左侧手机尺寸希望这里有人知道怎么做，可以帮忙！

这就是我要的

这就是我想出的

单击后折叠向左移动如何解决此问题？

代码

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="https://i.stack.imgur.com/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>

标签： jqueryhtmltwitter-bootstrapcss

解决方案

这是一个让您入门的快速示例。注意用于将 div 定位到左侧和右侧的 content 和 nav 部分中使用的类。

.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导航到右侧

问题描述

这就是我要的

这就是我想出的

单击后折叠向左移动如何解决此问题？

代码

解决方案

推荐阅读