在引導程序中橫向隱藏/顯示col-4（近似）div / element

Question

引導中隱藏圖片的show / show元素的最佳方法是什么？ 我開始是這樣的：

<div class="container-fluid no-padding-left">
    <div class="row">
        <div class="col-md-4 no-padding-left">
            <div class="row">
                <div class="col-md-12 background-azul-claro">
                    <div class="col-md-2 text-left">
                        <a href=""><img src="assets/images/ic_close_white_36dp_1x.png" alt=""> </a>
                    </div>
                    <div class="col-md-8 text-center" style="">
                        <h3>Nueva incidencia</h3> </div>
                    <div class="col-md-2 text-right">
                        <a href=""><img src="assets/images/ic_done_white_36dp_1x.png" alt=""> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-12 no-padding-left"> <img src="assets/images/default-image.jpg" alt="" class="img-responsive"> </div>
            <div class="col-md-12 no-padding-left background-azul-oscuro"> <img src="" alt=""> </div>
            <!-- form div with form field -->
            <!-- checkbox Mostrar otras incidencias -->
        </div>
    </div>
</div>

styles.css

.background-azul-oscuro {
    background-color: #009688;
}
.background-azul-claro {
    background-color: #00BFA5;
}
.no-padding-left {
    padding-left: 0px;
}
h3 {
    color: white;
}

嵌套列是實現此目標的最佳方法？？？ 我在前端使用角度，我應該使用普通的引導程序還是角度ui引導程序??? 我想要具有隱藏和顯示功能的完全負責任的元素。

Answer 1

由於您必須使用自定義寬度，邊距和填充作為默認引導程序列的寬度 ，因此使用它們沒有太大意義。

我認為您可能會有這樣的事情：

<div class="container">
  <div class="background-azul-claro">
   //  position:relative;
       width: calc(100% - 40px);
       margin-right: 40px;  
       float: left;
  </div

  <div class=" background-azul-oscuro">
   // position: relative;
      width: 40px;
      float: right;
  </div>
</div>

*如果您希望一個div懸停在另一個div上，則應使用position: absolute;