将内容添加到行的右上区域

Question

在使用右拉，浮动式和排液的各种尝试之后，我决定在这里问：

我尝试做的只是让一个地图显示在一组行的右侧。

以下是它现在的样子：

这与我想要的并不太远，但名称行加上任何后续行应该显示在彼此之下。

以下是我的HTML外观：

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

我敢打赌这是一个典型的场景，但我没有找到一个例子。

使名称显示在数字下方的其他尝试将其移动到地图下方。

是否可以避免让地图占用Bootstrap网格系统中的垂直空间？

Answer 1

您应该使用2-col布局：

• 输入的左列
• Google地图的右栏

另外，请记住将.input-group放在.form-group内以将填充/边距设置为Bootstrap默认值。

这是一个有效的例子（点击整页以获得更好的视图）：

body {
  padding-top: 25px;
}
.map {
  width: 100%;
  height: 150px; 
  background: tomato;
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel heading</h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-xs-6">
        <form role="form">
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon">Number</span> <input type="number"
              class="form-control" placeholder="Nr">
            </div>
          </div>
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon">Name</span> <input type="text"
              class="form-control" placeholder="Name">
            </div>
          </div>
        </form>
      </div>
      <div class="col-xs-6">
        <div class="map"></div>
      </div>
    </div>
  </div>
</div>
</div>