Question

我一直在学习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">&times;</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>

这是一个codepen（视图应该更改为在右侧/左侧显示，bootstrap有点奇怪）感谢您的帮助。

Answer 1

乔尔，

当您单击可折叠时，折叠旁边的按钮会从视图中消失，因为其间的文本大小为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">&times;</button>

可折叠移动文本旁边的按钮应位于底部

1 个答案: