twitter-bootstrap中的文本对齐

Question

在我的网站上，我正在放置Google地图以显示我的位置。 我想通了Google Map API，没有任何困难。 我的问题是我在谷歌地图旁边写了我的电话号码和地址，但它总是显示在谷歌地图下面。 我尝试了几个不同的Bootstrap网格组件，但是没有运气。

<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Contact Us</h2>
                <hr class="star-primary">
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-xs-6 col-sm-3">
              <div id='map'></div>
                <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
                <div>123-4567-8910
                </div>
            </div>
        </div>
    </div>
</section>

第6行是自定义CSS，显示hr行中间的星标。 我尝试了一些组件，但是我的联系信息就在地图旁边，没有任何空间。 我该怎么办？ 谢谢你的阅读！

Answer 1

您可以在两列中设置样式

       <div class="row">
        <div class="col-md-4 col-xs-6 col-sm-3">
          <div id='map'></div>
        </div>
        <div class="col-md-4 col-xs-6 col-sm-3">
            <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
            123-4567-8910
        </div>
    </div>

或者你左边一个浮标（在divinside里面有跨度）

      <div class="row">
        <div class="col-md-4 col-xs-6 col-sm-3">
          <div id='map'></div>
            <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
            <div style="float-left" > span class="glyphicon glyphicon-phone-alt" aria-hidden="true">123-4567-8910</span>
            </div>
        </div>
    </div>

否则，请检查您的页面/标签是否格式正确（正确嵌套，打开/关闭）