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

這就是可見性的整體思想：隱藏；即使隱藏元素也可以保留空間。 但在顯示中：沒有人會離開空間。