Question

<body onload="initialize()">

<div id="map" style="width:300px; height:300px; display:block;">
    <div id="map_canvas" style="width:300px; height:300px;"></div>
    </div>
        <div class="container-fluid">
        <div class="row">
            <div class="col-md-3"><br>
                <a href="{{ url_for('detail', site='MY1', days=1) }}">MY11</a>
            </div>

            <div class="col-md-2">
                <a href="{{ url_for('detail', site='MY1', days=1) }}">MY11</a>
                <select onChange="window.location.href=this.value">
                    <option disabled="disabled" selected="selected" value=""></option>
                    <option value="{{ url_for('detail', site='MY1', days=2) }}">48 hours</option>
                    <option value="{{ url_for('detail', site='MY1', days=3) }}">72 hours</option>
                    <option value="{{ url_for('detail', site='MY1', days=5) }}">5 days</option>
                    <option value="{{ url_for('detail', site='MY1', days=7)  }}">7 days</option>
                    </select>
            </div>

            <div class="col-md-7 text-right">
                <form>
                    <select name="mapchange"      onchange="updateMap(this.options[this.selectedIndex].value)">
                        <option  value="school1">school 1</option>
                        <option  value="school2">school 2</option>
                    </select>
                </form>
            <div>
        </div>
    </div>
</body>
</html>

我正在使用上面的HTML代码，我想将google地图图片放在页面的右侧。我使用的Bootstrap css样式应该有12个单位的默认值，所以我认为应该通过以下代码将地图设置在页面右侧：

<div class="col-md-7"><br>

这是渲染输出：

我需要做什么或改变以将其置于右侧？

Answer 1

    <div class="container-fluid">
        <div class="row">
            <div id="map" class="col-md-7 col-md-offset-5 text-right">
                <div id="map_canvas" style="width:100%; height:300px;"></div>
            </div>
            <div class="col-md-3"><br>
                <a href="{{ url_for('detail', site='MY1', days=1) }}">MY11</a>
            </div>

            <div class="col-md-2">
                <a href="{{ url_for('detail', site='MY1', days=1) }}">MY11</a>
                <select onChange="window.location.href=this.value">
                    <option disabled="disabled" selected="selected" value=""></option>
                    <option value="{{ url_for('detail', site='MY1', days=2) }}">48 hours</option>
                    <option value="{{ url_for('detail', site='MY1', days=3) }}">72 hours</option>
                    <option value="{{ url_for('detail', site='MY1', days=5) }}">5 days</option>
                    <option value="{{ url_for('detail', site='MY1', days=7)  }}">7 days</option>
                    </select>
            </div>

            <div class="col-md-7 text-right">
                <form>
                    <select name="mapchange"  onchange="updateMap(this.options[this.selectedIndex].value)">
                        <option  value="school1">school 1</option>
                        <option  value="school2">school 2</option>
                    </select>
                </form>
            <div>

        </div>

    </div>

Answer 2

将.col-md-offset-5作为该元素的附加类添加到右侧（按5个网格单位）：

<div class="col-md-7 col-md-offset-5 text-right">

设置HTML模板的列

2 个答案: