부트 스트랩 유체 격자

부트 스트랩으로 작업 한 것은 처음입니다. 다양한 크기의 화면에서 동작하도록 그리드를 조작하는 방법에 대한 몇 가지 개념적 질문이 있습니다.부트 스트랩 유체 격자

HTML : :

<!DOCTYPE html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <link rel="stylesheet" type="text/css" href="static/lib/bootstrap_3.0.0/css/bootstrap.min.css" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<div class="container-fluid"> 
<div id="page-content" class="application-body-home"> 
<h2 id="homepage-title">Campsites</h2> 
    <div id="content" class="row"> 
     <input type="hidden" id="geojson_sites" name="geojson_sites_url" value="/sandbar/surveys/sites_geo_json/" readonly> 
     <div id="sandbar-intro" class="col-md-4 item"> 
      <div class="sectionWideTitle">Introduction</div> 
      <div id='intro-text' class="well full"> 
      </div> <!-- end of intro-text section--> 
     </div> <!-- end of sandbar intro section--> 
     <div id="sandbar-monitoring" class="col-md-4 item"> 
      <div class="sectionWideTitle">Campsite Monitoring</div> 
      <div id="sites-map-div" class="well full"> 
       <div id="monitoring-text"> 
       </div> 
       </div> <!-- end of sites-map-div section--> 
     </div> <!-- end of sandbar monitoring section--> 
     <div id="sandbar_data" class="col-md-4 item"> 
      <div class="sectionWideTitle">Campsite Locations and Historical Photos</div> 
      <div id="sandbar_data_links" class="well full"> 
      </div> <!--end of sandbar data links section--> 
</div> <!-- End of sandbar data section--> 

<div class="col-md-4 item"> 
      <div class="sectionWideTitle">For Additional Information</div> 
      <div class="well half"> 
       <span>For additional information, please contact</span> 
       </div> <!-- end of well half div--> 
       <div class="sectionWideTitle">Terms of Use</div> 
      <div class="well half"> 
         </div> <!--End of well half div--> 
</div> <!-- End of col-md-4 item additional info section--> 

     <div class="col-md-4 item"> 
      <div class="sectionWideTitle">References</div> 
      <div class="well full"> 
       <div class="media"> 
        <div class="media-body"> 
             </div> <!--end of calss media body tag--> 
       </div> 
       </div> 
     </div> <!-- End of References Section--> 
      <div class="col-md-4 item"> 
      <div class="sectionWideTitle">Cooperating Agencies and Academic Institutions</div> 
      <div class="well half"> 
       <div class="media"> 
       </div> 
    <div class="media"> 
       </div> 
          </div> 

     </div> <!-- End of cooperating agencies section--> 
</div> <!-- end of id content class row section --> 
</div> <!-- end of page content tag --> 
    </div> <!--end of contaner fluid section--> 
</body> 
</html>

은`태그이 게시물에 첨부 된 bootstrap.min.css 파일을 참조한다

나는 내 문제를 설명하는 데 도움이 재현 예를 개발했다.

bootstrap.min.css

나는 가장 큰 화면에 최대 3 열을 원하고 난 용기 (넓은 수)의 끝으로 확장 할 수있는 상자를하고 싶습니다. 현재 상자가 모두 같은 줄에 올 때까지 늘어납니다. 3 열에 도달하면 각 상자가 늘어나 컨테이너의 전체 너비를 커버하게됩니다.

얼마나 많은 열을 제어 할 수 있습니까?

상자가 서로 붕괴되는 순서를 제어하는 방법이 있습니까? 즉, 3 열에서 2 열로 또는 2 열에서 1 열로 이동하는 방법이 있습니까? 미디어 쿼리 동작에 대한 부트 스트랩 기본 클래스를 사용

이

출처

2014-11-19 dubbbdan

당신을 위해 무엇을 찾고 있습니다 : 대형 스크린에

<div id="sandbar-monitoring" class="col-lg-4 col-md-6 item col-xs-12">

, 당신은 당신이이 개 항목이있을 것이다, 태블릿 행
당 3 개 항목이됩니다 행당
휴대 전화의 경우 행 당 1 개의 항목이 표시됩니다.

출처

2014-11-19 20:03:02 eHx

굉장! 감사. 상자가 2 열일 때 상자의 순서를 제어하는 방법이 있습니까? – dubbbdan

BS '그리드 시스템으로 열 오프셋을 볼 수 있습니다 : http://getbootstrap.com/css/#grid – eHx

부트 스트랩 유체 격자

답변

관련 문제