Html 如何在响应性谷歌地图旁添加联系人详细信息

抱歉，如果这是基本的，但我一直在尝试添加谷歌地图旁边的联系方式。但它们最终显示在地图下方，而不是旁边。我错过了什么？非常感谢你的帮助

这就是它目前的样子：

HTML:

---

首先，

标记会自动在元素中包含

显示：block

样式，因此即使元素未显示，它也会使元素显示全宽。因此，您需要做的是在每个div容器中添加

float:left

我使用了引导版本2.3.1

检查

HTML

    <div class="row">

  <div class="span9">
    <div class="map-responsive">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="100%" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="span3">
    <div class="contact-details">
      <h3>Contact Details</h3>
      <ul>
        <li>
          <a href="#">
            hello@hello.com
          </a>
        </li>
        <li>(916) 375-2525</li>
        <li>
          NY City meet
          <br>
          NY City
          <br>
          USA
        </li>
      </ul>
    </div>
  </div>

</div>

联系方式



（916）375-2525

纽约市会议


纽约市


美国

根据要求更新职位

.contact-details ul li {
position:absolute;
left:300px;
top:20px;
margin: 0 0 20px;
line-height: 28px;
padding: 0; 
}

---

你在使用引导吗？是的。我在使用引导模板。你在使用哪个版本？？请让我知道..请将您的版本更新到3.3.6。很遗憾，我使用的是一个设置模板，迁移到v3将涉及大量工作。有可能在当前版本中解决这个问题吗？在地图的css中添加float:left似乎没有帮助。我理解错了吗？它们仍然在我的小提琴屏幕上一个接一个地出现。我们能让他们看起来挨着吗？9列地图和3列细节？尝试使用

col-xs-9

和

col-xs-3

代替！如果能在v2.3.1中解决这个问题就太好了，因为为我切换将是一个很大的麻烦now@chris它工作正常，请检查更新的小提琴，让我知道非常感谢你的帮助苏尼尔！

    <div class="row">

  <div class="span9">
    <div class="map-responsive">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="100%" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="span3">
    <div class="contact-details">
      <h3>Contact Details</h3>
      <ul>
        <li>
          <a href="#">
            hello@hello.com
          </a>
        </li>
        <li>(916) 375-2525</li>
        <li>
          NY City meet
          <br>
          NY City
          <br>
          USA
        </li>
      </ul>
    </div>
  </div>

</div>

.contact-details ul li {
position:absolute;
left:300px;
top:20px;
margin: 0 0 20px;
line-height: 28px;
padding: 0; 
}