标签: bootstrap-5

Bootstrap 崩溃在 Angular 9 中不起作用

当我更改屏幕尺寸时，我遇到导航栏无法打开菜单的问题。

以下是我正在运行的依赖项的版本：

"@angular/animations": "~9.0.6",
    "@angular/common": "~9.0.6",
    "@angular/compiler": "~9.0.6",
    "@angular/core": "~9.0.6",
    "@angular/forms": "~9.0.6",
    "@angular/platform-browser": "~9.0.6",
    "@angular/platform-browser-dynamic": "~9.0.6",
    "@angular/router": "~9.0.6",
    "bootstrap": "^5.1.1",
    "jquery": "3.4.1",
    "popper.js": "^1.16.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"

Run Code Online (Sandbox Code Playgroud)

我已经尝试按照另一篇文章中的建议降级我的 jquery，但这没有任何作用。

这是我的 HTML：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary my-navbar fixed-top">
    <div class="container-fluid">
      <!--<a class="navbar-brand" href="#">Navbar</a> -->
      <img
    width="200"
    alt="logo"
    src= "assets/imgs/logo.png"
  />
  <button class="navbar-toggler" type="button" data-toggle="collapse"  data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <a class="nav-link" routerLink="/userprofile" routerLinkActive="active">Home
              <!--<span class="visually-hidden">(current)</span>-->
            </a>
          </li>
          <li class="nav-item"> …

Run Code Online (Sandbox Code Playgroud)

angular bootstrap-5

M. *_*al.

2022 11-26

0
推荐指数

1
解决办法

5895
查看次数

mr-md-5 在 Bootstrap 中不适用于我

请指出我的错

<div class="container">
  <div class="row">
    <div class="col-sm-3 mr-md-5 bg-success">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, dicta corporis iusto ea reiciendis suscipit alias odit adipisci esse beatae at tempore ullam accusantium atque recusandae molestias voluptatem obcaecati modi.</div>
   <div class="col-sm-4 mt-md-4 bg-warning">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, at.</div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap twitter-bootstrap-3 bootstrap-4 bootstrap-5

M T*_*ail

2021 11-17

0
推荐指数

1
解决办法

1054
查看次数

h1标签Bootstrap 5中不同的span标签具有不同的对齐方式

我需要在 h1 标签内嵌套 3 个 span 标签（或类似标签），将第一个标签对齐左侧，第二个标签对齐中间，第三个标签对齐右侧。

我可以通过 Bootstrap 来完成还是需要适当的 CSS？

html css bootstrap-5

InT*_*ime

2022 01-25

0
推荐指数

1
解决办法

275
查看次数

无法将 Bootstrap 5 中的项目与页面中心对齐

我正在尝试使用 Bootstrap Flex Box 将项目与 html 页面的中心对齐。由于某种原因，align-items-center 属性不起作用。

<!DOCTYPE html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
    <div class="container d-flex justify-content-center align-items-center">
        elment goes here
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

Run Code Online (Sandbox Code Playgroud)

html alignment bootstrap-5

作者

lucky-day

0
推荐指数

1
解决办法

2606
查看次数

仅显示打开的一个折叠（Vue 3 / Bootstrap 5）

我正在与Bootstrap5和合作Vue 3。我有多个buttons，每个都触发一个collapse。

我想要的是，如果我打开一个折叠，所有其他折叠都应该关闭。但现在每一个崩溃都会显示出来，而其他的则不会关闭。

我尝试过使用data-parent，data-bs-parent但这些都不起作用。

我怎样才能做到这一点？谢谢你！

<div class="row margin-top">
  <div class="col">
    <div class="d-grid gap-2">
      <button type="button" class="btn color-success" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1" data-bs-parent="#myGroup">
        Button 1
      </button>
    </div>
  </div>

  <div class="col">
    <div class="d-grid gap-2">
      <button type="button" class="btn color-primary" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2" data-bs-parent="#myGroup">
        Button 2
      </button>
    </div>
  </div>
</div>

<div>
  <div class="collapse" id="collapse-b1">
    <div class="mt-3">
      Text 1
    </div>
  </div>

  <div class="collapse" id="collapse-b2">
    <div class="mt-3">
      Text 2 …

Run Code Online (Sandbox Code Playgroud)

javascript vue.js vuejs3 bootstrap-5

B0B*_*BBY

2022 11-26

0
推荐指数

1
解决办法

4238
查看次数

如何防止 Bootstrap 5 下拉菜单在单击内部时关闭

我试图阻止 Bootstrap5 下拉菜单在单击内部时关闭。在 Bootstrap 3 中，下面的代码可以正常工作，但在 Bootstrap 5 中则无法正常工作。

//stop all bootstrap dropdown menu from closing on click inside
$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation();
});

Run Code Online (Sandbox Code Playgroud)

我正在使用下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

Run Code Online (Sandbox Code Playgroud)

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





<script>

//stop all bootstrap dropdown menu from closing on click inside
$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation();
});

</script>

<div class="container mt-3">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p> …

Run Code Online (Sandbox Code Playgroud)

bootstrap-5

Nan*_*ore

2022 07-14

0
推荐指数

1
解决办法

2055
查看次数

将搜索框移至导航栏末尾

我想移动导航栏末尾的搜索图标和搜索输入。我正在使用 Bootstrap 5.0.2 IDK 如何移动最后的图标和搜索框，因为我也是 Bootstrap、HTML 和 CSS 的新手。另外，我不想增加搜索框的大小，我希望其宽度为 50%，如果我将宽度设置为 100%，搜索框和图标将最终显示，但我希望其宽度为 50%并保留两者他们最后

.Banner {
  width: 100%;
  height: 75%;
  position: fixed;
  background-image: url(/NavBar/Img.png);
  background-size: cover;
  background-position: center;
}

.icon-white {
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.cont:hover .cube {
  color: black;
}

#searchform {
  float: right;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linux Coder</title>

  <link rel="stylesheet" href="/style.css">

  <!-- Bootstrap -->

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <!-- Bootstrap Icons --> …

Run Code Online (Sandbox Code Playgroud)

html css navbar bootstrap-5

作者

2023 04-04

0
推荐指数

1
解决办法

270
查看次数

如何使用 Bootstrap 5 设置对角线背景样式？

使用 Bootstrap 5 和 (s)css 时如何创建对角线风格的背景（如下面的屏幕截图所示）？

理想情况下与此处记录的其他 Bootstrap 后台实用程序完美配合： https ://getbootstrap.com/docs/5.3/utilities/background/

例如，当有：

<div class="bg-primary-subtle text-emphasis-primary">
  Lorem ipsum.
</div>

Run Code Online (Sandbox Code Playgroud)

或使用其他颜色、渐变和不透明度：

<div class="bg-success text-white bg-gradient bg-opacity-75">
  Lorem ipsum.
</div>

Run Code Online (Sandbox Code Playgroud)

能够轻松添加对角线效果（向上/向下任一方向）？

或者有时：

html css sass twitter-bootstrap bootstrap-5

Mar*_*ijk

2024 01-29

0
推荐指数

1
解决办法

142
查看次数

标签统计

bootstrap-5 ×8

html ×4

css ×3

twitter-bootstrap ×2

alignment ×1

angular ×1

bootstrap-4 ×1

javascript ×1

navbar ×1

sass ×1

twitter-bootstrap-3 ×1

vue.js ×1

vuejs3 ×1

标签 统计

标签统计