twitter-bootstrap中的文本对齐

Question

On my website, I am putting google map to show my location. I figured out with google map API without any difficult. My problem is that I write my phone number and address beside this google map, but it always show below google map. I tried couple of different bootstrap grid components, but no luck with me.

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

Line 6 is custom CSS that shows star mark middle of hr line. Some components I tried worked, but then my contact information is right beside map without any space. What can I do with this? Thank you for reading!

Answer 1

You can style in two column

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

or you a float left (with span inside divinside the )

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

Otherwise check if your page / tag are well formed (correctly nested, open/closed)