图像旁边的Bootstrap文本

时间:2015-09-14 08:00:46

标签: css twitter-bootstrap

我之前遇到的问题可能是你们所有人都遇到过的。我需要在图像旁边放置文本,在我的情况下,一切都在MODAL窗口内完成。

我在bootstrap中找到了多种方法,不幸的是它对我不起作用,我很想念一些非常简单的东西,所以我希望有人可以告诉我我做错了什么。

这是我的代码:

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">PŘIPRAVUJEME</h4>
            </div>
            <div class="modal-body">
              <div class="col-md-6">
                <img src="http://tpot.cz/Images/cv/antikody-small.png" class="pull-left">
              </div>
              <div class="col-md-6">
                      <p>Václav Havel ANTIKÓDY
                  V prodeji ve dvou variantách v limitovaném luxusním provedení v kovových deskách Promolyte nebo
                  v papírových deskách Fedrigoni s koženým hřbetem
                  Rezervace jsou možné na emailové adrese info@tpot.cz
                  K prodeji od 1. 10. 2015</p>
              </div>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

为什么不使用Bootstrap附带的media组件。简单地放在modal-body元素内。例如:

<div class="modal-body">
  <div class="media">
    <div class="media-left">
      <img class="media-object" src="http://tpot.cz/Images/cv/antikody-small.png" alt="">
    </div>
    <div class="media-body">
      <p>Václav Havel ANTIKÓDY V prodeji ve dvou variantách v limitovaném luxusním provedení v kovových deskách Promolyte nebo v papírových deskách Fedrigoni s koženým hřbetem Rezervace jsou možné na emailové adrese info@tpot.cz K prodeji od 1. 10. 2015</p>
    </div>
  </div>
</div>