我一直在学习 Bootstrap ，所以我一直在制作一个网站来练习它。我有一个大的红色可折叠组件，单击它会显示一些文本。我旁边有一个按钮，单击时它会移动到文本下方，当我希望它位于红色按钮的底部时，当单击可折叠时，文本位于两个按钮之间。我不确定如何移动下面的按钮并让文本介于两者之间。
编辑:如果你能帮我弄清楚为什么模态上的“X”按钮在模态文本的左边，那就加分了
https://codepen.io/anon/pen/Nwajax
HTML
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
<button data-toggle="collapse" data-target="#main_collapse" class="btn-danger" id="coll_button">Collapsible</button>
<div id="main_collapse" class="collapse">
<h1>Some pretty neat random text that just appears when you click on the collapse thing</h1>
</div>
<!--Start modal-->
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--End modal-->
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu drop1">
<li class="drop1"><a href="#">Dropdown 1</a></li>
<li class="drop1"><a href="#">Dropdown 2</a></li>
<li class="drop1"><a href="#">Dropdown 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
</body>
</html>
这是一个代码笔( View 应该更改为在右/左显示， Bootstrap 有点奇怪)感谢您的帮助。
最佳答案
乔尔，
当您单击可折叠项时，可折叠项旁边的按钮将从 View 中消失，因为中间文本的大小为 h1。将其更改为较小的尺寸，例如。 h6
<h6>Some pretty neat random text that just appears when you click on the
collapse thing</h6>
此外，您在标题之前看到模型上的关闭按钮的原因是标记的构建方式。你首先有按钮的标记，然后是标题将其更改为标题首先是按钮，如下所示:
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
关于javascript - 带有文本的可折叠移动旁边的按钮应该在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47320129/