2016-09-05 1 views
0

그림과 같이 hide/show 요소를 부트 스트랩에 만드는 가장 좋은 방법은 무엇입니까 ?? 나는 이런 식으로 뭔가 시작 :hide/show laterally col-4 (aproximately) div/element in bootstrap

<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; 
} 

키우면 중첩 열 그것을 할 수있는 최선의 방법 ??? 임 프런트 엔드에서 각도를 사용하여, 내가 정상적인 부트 스트랩 또는 앵글 부트 스트랩을 사용해야합니까 ??? 기본 부트 스트랩 COL 년대에 대한 사용자 정의 폭, 마진과 패딩를 사용하는 것 때문에 내가 숨기기 및 표시 기능을 완전히 책임 요소를 싶습니다 ..

enter image description here

답변

0

는 많은 의미가없는 그들을 사용합니다.

당신은 내 생각에 이런 일을 할 수 :

<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> 

* 당신은 하나 개의 사업부가 다른 위에 마우스를 이동하고 싶을 경우에, 당신은 사용해야 position: absolute;