Проблема с выравниванием с помощью CSS и Bootstrap

Question

В моей карте листовки указано название карты, которая должна находиться над картой. Я использую CSS и Bootstrap для выравнивания элементов страницы. Смотрите изображение: Вот код:

<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> 

Ссылки на DataTable и карту следующим образом:

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

Карта предполагается чтобы выстроиться вверх с вершиной «диафильма», и у него есть название «Местоположение», как «Медиа». Это позволит добавлять итоговую статистику вверху каждого элемента.

Answer 1

dc.leaflet.js собирается взять на себя весь <div> это дает в своем конструкторе, так что просто переместить название из 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> 

Вы увидите множество примеров, в которых используются другие материалы внутри div, которые используются в диаграммах dc.js. В основном это полезно для элементов управления фильтром сброса/отображения, так что диаграмма может их найти и изменить. Это сбивает с толку макет.

Другим решением может быть добавить к верхнему краю с помощью marginMixin.margins():

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

Может быть, что dc.js ведет себя лучше в отношении этих дополнительных элементов, чем dc.leaflet.js делает, или он может просто 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>