div (.well)의 크기 - Twitter 부트 스트랩

저는 유동적 인 레이아웃 인 Twitter Bootstrap로 웹 사이트를 구축하고 있습니다. 왼쪽에 내용이 있고 오른쪽에 작은 메뉴가 있습니다. 메뉴가 우물에 있어야합니다.div (.well)의 크기 - Twitter 부트 스트랩

<div class="row-fluid"> 
    <div class="span9">...</div> 
    <div class="span3"> 
     <div class="well" style="height: 100%;"> 
      <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i> Een project toevoegen</a> 
      <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i> Alle projecten bekijken</a> 
      <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i> Deze lijst afdrukken</a> 
     </div> 
    </div> 
</div>

문제는 우물이 메뉴의 모든 링크를 포함하기에 충분한 높이가 없다는 것입니다. 나는 메뉴가 PHP에 의해 생성 되었기 때문에 높이를 수동으로 설정하고 싶지 않으며 필요 이상으로 커서 싶지 않습니다.

<div class="row-fluid"> 
    <div class="span9">...</div> 
    <div class="span3 well"> 
     <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i> Een project toevoegen</a> 
     <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i> Alle projecten bekijken</a> 
     <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i> Deze lijst afdrukken</a> 
    </div> 
</div>

이 모든 링크를 포함 할 수있을만큼 충분히 잘 큰 만들지 만, 그것은 더 이상 span9 div의 옆에 맞지 않는의 span3 div에 너무 큰 있습니다.

이 문제를 해결할 수있는 방법은 있습니까?

출처

2012-04-17 user1026090

[이 문제는] (http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh) 너도 가지고있어? – Edu

.well은 버튼이 떠 다니기 때문에 제대로 배치되지 않았습니다. 스타일 시트에 (bootstrap.css 스타일 시트가 아닌) float:none으로 정의하면 제대로 작동합니다.

HTML

<div class="row-fluid"> 
    <div class="span9">...</div> 
    <div class="span3"> 
     <div class="well menu"> 
      <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i> Een project toevoegen</a> 
      <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i> Alle projecten bekijken</a> 
      <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i> Deze lijst afdrukken</a> 
     </div> 
    </div> 
</div>

CSS

.menu .btn { 
    float:none; 
}

참고 : 나는 당신의 .well 섹션, 어떤 CSS가 만 것 부트 스트랩에서 수정하는 방법을 대상으로하는 .menu 클래스를 정의 해당 섹션에 적용하고 나머지는 적용하지 마십시오.

출처

2012-04-17 12:20:36

완벽하게 작동했습니다. 정말 고마워요! – user1026090

div (.well)의 크기 - Twitter 부트 스트랩

답변

관련 문제