은 아래 브라우저에

Question

나는, HTML

<div class="container"> 
    <h1 class="page-header" id="property_head">A cool title</h1> 
    <div class="row text_img"> 
    <div class="span9"> 
     <div class="row"> 
     <div class="span3" id="activity"><img src="http://some/img.png"></div> 
     <div class="span5" id="activity_text"><h3 class="text_title">Great Title</h3><br><p class="lead">Foo</p></div> 
     </div> 
    </div> 
    </div> 
</div> 

다음이 있고 내가 containerpage-headerrow 및 span3/5에 대한 bootrap을 사용하고 css-

.text_img { 
    padding: 30px; 
    margin-bottom: 30px; 
    margin-left: 100px; 

} 

#activity { 
    float: left; 
    margin-right: 30px; 
} 

#activity_text { 
    float: right; 
    border:1px solid black; 
} 

에 따라 크기를 조정 부동 후 사업부를 중심으로. 내가 300px #activity_text에 대한 브라우저의 크기를 아래쪽으로 조정하면 내가 원하는 내용 인 #activity 밑에 위치합니다.

저는 미디어 쿼리를 사용하고 있습니다. img 아래에 텍스트 위치가 정해져있어 img가 텍스트 위 중앙에 위치하고 미디어 쿼리를 사용하여 모든 너비에 대해 그 상태를 유지하고 싶습니다.

여러 가지 방법을 시도한 후에이 작업을 수행하기에 CSS가 확실하지 않습니다. 참석해 주셔서 감사합니다. 첨부 파일을보십시오.

참고 : 자동 : 미디어 쿼리를 알 수 있도록 배경의 색상을 변경하면 그냥 수레를 제거해야, 그것에게 폭 & 여유를주지 특정 미디어 쿼리에서

Answer 1

을 중단 점. 예 : 원하는 미디어 쿼리 최대 폭에 :

#activity { 
    float:none; 
    width:50%; /* or whatever you want it to be */ 
    margin:auto; 
} 

는 CSS는 설정이 사용자가 위의 당신이 해당 미디어에 수행 할 작업이 수행되었는지 확인하기 위해 하나 또는 CSS의 모든 !important를 추가 할 수 있습니다 얼마나 부트 스트랩 따라 쿼리 포인트. 이것은이

#activity_text { 
    float:none; 
    width:100%; 
}