CSS와 부트 스트랩의 정렬 문제

Question

내 리플렛 맵은지도 바로 위에 있어야하는지도 제목을 포함합니다. 나는 페이지 요소를 정렬하기 위해 CSS와 부트 스트랩을 사용하고 있습니다. 이미지 참조 :

var map = dc.leafletMarkerChart("#location", groupname) 
var dataTable = dc.dataTable("#media-table", groupname) 

지도가 예상되는 다음과 같이 데이터 테이블 및지도에

<style type="text/css"> 
body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

div { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
img { 
width:97%; /* you can use % */ 
height: auto; 
} 
div#location { 
    width:600px; 
    height:400px; 
} 

div#datatable {height:700px; overflow-y:scroll; width: 425px word-wrap: break-word;} 
td.dc-table-label {display:none;} 
span.dc-data-count {font-size:.5em;} 
span.dc-data-count {font-weight: normal;} 
table#media-table { 
    background-color: black; 
    color:white; 
    padding: 0; 
} 

<div class="container" style="padding-top:20px"> 

<h2 class="page-title">Ivan Doig Archive Explorer <span class="dc-data-count">Showing <span class="filter-count"></span> of <span class="total-count"></span> photographs {<a href="javascript:dc.filterAll(); dc.renderAll();">reset</a>}</span> 
</h2> 

    <div class="row"> 
     <div class="col-md-4"> 
      <strong><span id="datatable"></span>Media</strong> 
      <table class="table table-hover" id="media-table"></table> 
     </div> 
     <div class="col-md-6" id="location"> 
      <strong><span id="map"></span>Location</strong> 
     </div> 
    </div> 

참조는 다음과 같습니다 하면 코드 "필름 스트립"의 상단에 맞추고 "미디어"와 같은 "위치"라는 제목을 붙입니다. 이렇게하면 각 요소의 맨 위에 요약 통계를 추가 할 수 있습니다.

Answer 1

dc.leaflet.js 바로, 그래서 그냥 사업부에서 제목을 이동, 그것은 생성자에 주어진 것 전체 <div> 이상 걸릴 것입니다?

지도가 전체 부트 스트랩 열을 차지하지 않는다는 것을 의미하기 때문에 자체 하위 div에 배치해야합니다.

<div class="row"> 
    <div class="col-md-4"> 
     <strong><span id="datatable"></span>Media</strong> 
     <table class="table table-hover" id="media-table"></table> 
    </div> 
    <div class="col-md-6" id="location-column"> 
     <strong><span id="map"></span>Location</strong> 
     <div id="location"> 
    </div> 
</div> 

dc.js 차트에서 사용하는 div 안에 다른 예제를 넣는 예제가 많이 있습니다. 차트가 리셋/디스플레이 필터 컨트롤을 찾아서 변경할 수 있도록하는 것이 가장 유용합니다. 그것은 레이아웃을 혼란스럽게 만듭니다.

map.margins({top: 100, left: 0, right: 0, bottom: 0}); // or whatever you need 

그것은 dc.js를가 dc.leaflet.js보다는 그 여분의 요소에 대한 더 나은 동작하는 것이 될 수있다 않거나 월 :

또 다른 해결책은 marginMixin.margins()를 사용하여 위쪽 여백에 추가 할 수 있습니다 단지 dc.js가 기본 여백을 가지고 있고 dc.leaflet.js가 zeros them out 인 것입니다.

Answer 2

구조적으로 이상적인 것은 아니지만지도 요소의 시작점을 아래로 내리려고 스팬을 사용합니다.

<div class="row"> 
    <div class="col-md-12"> 
     <strong><span id="datatable"></span>Media</strong> 
    </div> 
    <div class="col-md-4"> 
     <table class="table table-hover" id="media-table"></table> 
    </div> 
    <div class="col-md-6" id="location"> 
     <strong><span id="map"></span>Location</strong> 
    </div> 
</div>