브라우저 너비가 너무 좁을 때 열이 줄입니다.

Question

Twitter 부트 스트랩을 사용하여 작은 사이드 바를 만들려고합니다.

난 단락 텍스트를 자유롭게 감쌀 수있게하고 싶습니다. 그리고 나는 항상 오른쪽에있는 버튼을 원합니다.. 그러나 브라우저가 전체 화면에서 더 작은 너비로 크기 조정될 때마다 수직 단추 그룹은 다음 행으로 내려 가고 while 창 너비를 차지합니다. 추한. 이것을 바꾸려면 어떻게해야합니까?

기본적으로, 나는 다음과 같은 코드 찾고 있어요 : 여기

<div class="container"> 
    <div class="row" style="margin-top: 10px;"> 
    <div class="span9 citation-text"> 
     <p class="citation-text">Here is a ton of text that is supposed to be a citation 
     but I'm hoping it'll wrap that's why it's not a citation. And yet it doesn't wrap 
     so it looks like I'll have to keep writing and writing until it does.</p> 
    </div> 
    <div class="span3 vertical-btn-group citation-options"> 
     <input type="button" class="btn btn-small btn-block btn-info citation-edit" 
     value="Edit" /> <input type="button" class= 
     "btn btn-small btn-block btn-danger citation-remove" value="Remove" /> 
     <input type="button" class= 
     "btn btn-small btn-block btn-warning citation-highlight" value="Highlight" /> 
    </div> 
    </div> 
</div> 

가 JSFiddle에 대한 링크입니다 :

http://jsfiddle.net/F39R8/

재생 주위 크기를 조정하고 볼 수와 내가 얘기하고있어.

Answer 1

브라우저가 768px 미만으로 조정되면 부트 스트랩은 모든 열 (스팬 *) 너비를 100 %로 설정하고 스팬 스택을 세로로 만드는 'float'을 제거합니다. 당신은

@media (max-width: 767px) { 
    .row .span9 { 
     float:left; 
     width:68%; 
    } 
    .row .span3 { 
     float:left; 
     width:28%; 
    } 
} 

http://jsfiddle.net/skelly/F39R8/2/

Answer 2

저는 최근에 CSS를 직접 사용하기 시작 했으므로 이것이 가장 좋은 방법이라고 확신하지는 않지만 위의 링크에 대해 CSS를 재정의하려 할 때 도움이되는 것처럼 보입니다 : CSS 스타일 시트에 들어가서 그 div 태그에 관한 섹션을 찾으십시오 ("#actions"라고 불리는 것으로 보입니다). min-width: 800px;을 입력하고 브라우저 창 크기를 조정하십시오. 그런 다음 픽셀 크기를 400 픽셀과 같이 조정하고 비교를 위해 다시 크기를 조정하십시오. 이 튜닝을 미세 조정하면 원하는대로 원하는 동작을 얻을 수 있습니다.

Answer 3

이 시도 .. 당신의 CSS에서 @media 쿼리를 사용하여이를 대체 할 수 있습니다 : 당신은 장소에 적절한 부트 스트랩 CSS 클래스를 참조 http://jsfiddle.net/F39R8/3/

를, 그래서 포함 된 부트 스트랩 파일에 반응 형 레이아웃을위한 CSS가 있다고 가정합니다. 제거한 후 응답하지 않는 버전 (http://twitter.github.io/bootstrap/assets/css/bootstrap.css)을 추가했습니다.