Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help:
My goal is simple - I want a Map to be displayed on the right side of a set of rows.
Currently, it looks like this:
Although close to what I desire, the name row and subsequent rows should be stacked vertically below each other.
This is how my HTML appears:
<div class="panel-body">
<div class="row-fluid">
<div class="col-lg-10 pull-right">
<google-map id="my-map" bounds="map.bounds" events="map.events"
center="map.center" zoom="map.zoom" draggable="true"
control="map.control"> <marker ng-if="positionMarker"
coords="positionMarker" icon="positionMarker.icon"> </marker> </google-map>
</div>
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</div>
</div>
I believe this is a common issue, but I haven't been able to locate a suitable example.
Any other attempts result in the name appearing below the number or shifting beneath the map.
Is there a way to prevent the map from occupying vertical space in the Bootstrap grid system?