文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用引导5设计侧边栏？

问如何使用引导5设计侧边栏？
EN

Stack Overflow用户

提问于 2022-07-15 07:35:41

回答 1查看 289关注 0票数 -1

我试图在我的应用程序中创建侧边栏，但是我不知道如何使用col将每个内容分离到left、right和center上。

这是我的肚脐：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
    <a class="navbar-brand" href="{% url 'register' %}"><h2>Borinati</h2></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item"><a class="nav-link active" href="{% url 'login' %}">Login</a></li>
            <li class="nav-item"><a class="nav-link active" aria-current="page" href="{% url 'register' %}">Sign Up</a></li>
            <li class="nav-item"><a class="nav-link active" href="{% url 'FeedBack' %}">About</a></li>                      
        </ul>
    </div>
</div>

这是我想在left上看到的内容

<a href="">Home</a>
<a href="">Contact Us</a>
<a href="">Companies</a>
<a href="">Products</a>
<a href="">Our Partner</a>
<a href="">Our Sponsor</a>

这就是我想在center上看到的内容

<div class="container">
    <div class="row justify-content-center">
      <form action="" method="GET">
        <input placeholder="Search By Category" type="text" class="form-control" name="q">
    </form>
   </div>
  </div> 
  <br>
    
<div class="container">
    <div class="row justify-content-center">
        {% for question in news reversed %}
        <div class="col-md-4">
            <div class="card my-3">
                <div class="card-body">
                    <a href="{% url 'view-News' news.slug %}" style="text-decoration: none;">
                    {{news.title}}
                    </a><br>
                    <br>
                    <a href="{% url 'Public_Profile' news.user.profile.slug %}">
                        {{news.user.username}}
                    </a>
                    <br>
                    <p class="btn btn-primary disabled btn-sm">{{news.category}}</p>                            
                </div>
            </div>
        </div>
        {%endfor%}
    </div>
</div>

css

bootstrap-5

sidebar

回答 1

Stack Overflow用户

发布于 2022-07-15 16:35:19

这是来自https://startbootstrap.github.io/startbootstrap-simple-sidebar/的一个1-1几乎正式的例子.我可以做一个复制粘贴，我会的，但我建议你也尝试一下。

我也把你的HTML粘贴到里面了。

/*!
 * Start Bootstrap - Simple Sidebar v6.0.5 (https://startbootstrap.com/template/simple-sidebar)
 * Copyright 2013-2022 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
 */

// 
// Scripts
// 
window.addEventListener('DOMContentLoaded', event => {
  // Toggle the side navigation
  const sidebarToggle = document.body.querySelector('#sidebarToggle');
  if (sidebarToggle) {
    sidebarToggle.addEventListener('click', event => {
      event.preventDefault();
      document.body.classList.toggle('sb-sidenav-toggled');

    })
  };
});

#wrapper {
  overflow-x: hidden;
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  transition: margin 0.25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
  margin-left: 0;
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }
  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }
  body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
    margin-left: -15rem;
  }
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">

<body>


  <div class="d-flex" id="wrapper">
    <!-- Sidebar-->
    <div class="border-end bg-white" id="sidebar-wrapper">
      <div class="sidebar-heading border-bottom bg-light">Start Bootstrap</div>
      <div class="list-group list-group-flush">
        <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Dashboard</a>
        <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Shortcuts</a>
        <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Overview</a>
        <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Events</a>
        <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a>
        <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Status</a>
      </div>
    </div>
    <!-- Page content wrapper-->
    <div id="page-content-wrapper">



      <!-- Top navigation-->
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="{% url 'register' %}">
            <h2>Borinati</h2>
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
              <li class="nav-item"><a class="nav-link active" href="{% url 'login' %}">Login</a></li>
              <li class="nav-item"><a class="nav-link active" aria-current="page" href="{% url 'register' %}">Sign Up</a></li>
              <li class="nav-item"><a class="nav-link active" href="{% url 'FeedBack' %}">About</a></li>
            </ul>
          </div>
        </div>
      </nav>


      <!-- Page content-->
      <div class="container-fluid">
   <div class="container">
    <div class="row justify-content-center">
      <form action="" method="GET">
        <input placeholder="Search By Category" type="text" class="form-control" name="q">
    </form>
   </div>
  </div> 
  <br>
    
<div class="container">
    <div class="row justify-content-center">
        {% for question in news reversed %}
        <div class="col-md-4">
            <div class="card my-3">
                <div class="card-body">
                    <a href="{% url 'view-News' news.slug %}" style="text-decoration: none;">
                    {{news.title}}
                    </a><br>
                    <br>
                    <a href="{% url 'Public_Profile' news.user.profile.slug %}">
                        {{news.user.username}}
                    </a>
                    <br>
                    <p class="btn btn-primary disabled btn-sm">{{news.category}}</p>                            
                </div>
            </div>
        </div>
        {%endfor%}
    </div>
</div>
      </div>
    </div>
  </div>
  <!-- Bootstrap core JS-->
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72990541

复制

相似问题

问如何使用引导5设计侧边栏？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用引导5设计侧边栏？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用引导5设计侧边栏？
EN