个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
对 HTML、CSS 和 Bootstrap 非常陌生。无法正常工作。
我已经包含了我的问题的 gif。我正在使用 bootstrap，当尝试在 H4 标签上使用 collapse 时，它无法正常工作。不知道我做错了什么。任何帮助将不胜感激。
这是我的代码。
.jumbotron {
background-color: #2E2D88;
color: white;
}
/* Adds borders for tabs */
.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.nav-tabs {
margin-bottom: 0;
}<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">
<title>Bootstrap Tutorial</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 1</h4>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 2</h4>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 3</h4>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 4</h4>
<p>Lorem ipsum</p>
</div>
</div>
<div class="row">
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4><a href="#col1content" data-toggle="collapse">Column 1</a></h4>
<div id="col1content" class="collapse">Text lorem ipsum.</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>最佳答案
您正在导入版本为 v3 而 CSS 版本为 v4 的 Bootstrap JS 库。 CSS 和 JS 必须是同一版本。
改为导入 v4 JS 库，然后它就可以工作了。
.jumbotron {
background-color: #2E2D88;
color: white;
}
/* Adds borders for tabs */
.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.nav-tabs {
margin-bottom: 0;
}<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">
<title>Bootstrap Tutorial</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 1</h4>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 2</h4>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 3</h4>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4>Column 4</h4>
<p>Lorem ipsum</p>
</div>
</div>
<div class="row">
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-12">
<h4><a href="#col1content" data-toggle="collapse">Column 1</a></h4>
<div id="col1content" class="collapse">Text lorem ipsum.</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>关于html - Bootstrap 标题在弹回之前会崩溃一秒钟？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54917334/
25
4
0
有什么办法(使用CSS)在最后一步之后将 Sprite 暂停一秒或多秒？我尝试再添加一个步骤或将相同的背景位置从 80% 增加到 100%，但没有成功。 .sprite { animation:
我正在使用 Flutter 创建一个新应用，并想在初始启动画面上添加自定义图像。 图像出现在初始屏幕上，但是在大约半秒钟内它看起来被拉伸(stretch)了，看起来不太好。 我一直在寻找，但一直找不到
我有一个状态: state = { showView: false, } 如何创建一个函数，在调用时将 showView 状态更改为 true 1 秒，然后将其更改回 false？ 最佳答案 this
我有一个平滑的滚动效果: jQuery('html,body').animate({scrollTop:scrollTarget}, 1000, "swing"); 它工作正常，但是当按下多个元素时，
我似乎遇到了与我之前发布的问题相同的问题。我想隐藏默认情况下存在的所有 div，只显示一个。然后用户可以单击一个侧面选项卡以显示另一个。问题是 div 在页面加载后仅隐藏一秒钟，但很快就会重新出现。这
我是一名优秀的程序员,十分优秀！