Alignment-Problem mit CSS und Bootstrap

Question

Meine Flugblatt-Map deckt den Titel der Karte ab, die genau über der Karte sein soll. Ich verwende CSS und Bootstrap, um Seitenelemente auszurichten. Siehe das Bild: Hier ist der Code:

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

Verweise auf die Datentabelle und der Karte sind wie folgt:

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

Die Karte soll sich an die Spitze des "Filmstreifens" zu setzen und es hat den Titel "Ort" wie "Medien". Dies ermöglicht das Hinzufügen von Statistikzusammenfassungen am oberen Rand jedes Elements.

Answer 1

dc.leaflet.js über die gesamten <div> nehmen wird es in seinem Konstruktor gegeben hat, so dass nur die Titel aus dem div bewegen, nicht wahr?

Da dies bedeutet, dass die Map nicht die gesamte Bootstrap-Spalte einnimmt, müssen wir sie in ein eigenes Kind-Div setzen.

Sie werden eine Menge Beispiele sehen, die andere Dinge in das div setzen, das dc.js charts verwendet. Es ist vor allem für die Reset-/Display-Filter-Steuerelemente nützlich, damit das Diagramm sie finden und ändern kann. Es macht das Layout verwirrend.

kann andere Lösung des oberen Rand hinzuzufügen sein marginMixin.margins() mit:

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

Es kann sein, dass dc.js gegen als dc.leaflet.js auf diese zusätzlichen Elemente besser verhält sich, oder es kann nur sein, dass dc.js hat Standardränder während dc.leaflet.js zeros them out.

Answer 2

Obwohl dies in Bezug auf die Struktur nicht wirklich ideal ist, würde ich die Spannen verwenden, um den Startpunkt des Kartenelements nach unten zu drücken.

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