Bootstrap隐藏元素需要放置

Question

我正在使用Bootstrap，并且在页面底部添加了导航栏。 但是notification bar元素（请看注释-它是带有id warning的div元素。

notification bar可以更改其可见性。 但是，当可见性“崩溃”时，div仍会占用所有空间。

我的代码：

 <div class="navbar navbar-default navbar-fixed-bottom">

    <!-- notification bar element can change visibility -->
    <div class="row"  id="warning" style="visibility: hidden;">
        <h2>Bottom Notification</h2>
        <small>Timestamp</small>
        <h3>This is a message.</h3>
    </div>
    <!-- -->

    <!-- element is static - can't change visibility -->
    <div class="container row">
        <p class="navbar-text pull-left">© 2016 - xxxx</p>
    </div>
</div>

我如何更改它，以便在隐藏可见性时div不占用任何空间？

Answer 1

那是对的。 visibility可以看作是不透明性...因此元素存在，但隐藏时不透明度为零。

如果您不希望它使用该位置，请使用display ：

<div class="row"  id="warning" style="display: none;">

Answer 2

除了visibility您还可以使用hide类并对其进行切换

<div class="navbar navbar-default navbar-fixed-bottom">
    <!-- notification bar element can change visibility -->
    <div class="row hide"  id="warning">
        <h2>Bottom Notification</h2>
        <small>Timestamp</small>
        <h3>This is a message.</h3>
    </div>
    <!-- -->
   <!-- element is static - can't change visibility -->
    <div class="container row">
        <p class="navbar-text pull-left">© 2016 - xxxx</p>
    </div>
</div>

Answer 3

更改style="visibility: hidden;" 为style="display: none;

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="navbar navbar-default navbar-fixed-bottom"> <!-- notification bar element can change visibility --> <div class="row" id="warning" style="display: none;"> <h2>Bottom Notification</h2> <small>Timestamp</small> <h3>This is a message.</h3> </div> <!-- --> <!-- element is static - can't change visibility --> <div class="container row"> <p class="navbar-text pull-left">© 2016 - xxxx </p> </div> </div> 

Answer 4

采用

display: none

代替

visibility: hidden

w3schools上的差异得到了很好的解释

Answer 5

这就是可见性的整体思想：隐藏；即使隐藏元素也可以保留空间。 但在显示中：没有人会离开空间。