html - 显示图像和列表 inline bootstrap 3

Question

好的。所以我得到了一个图像，该图像具有一个链接到其左侧图像的无序列表。 其左侧的主体使用 imagemapster。

它的工作原理是，如果单击列表项，右侧会显示相应的信息。这完全没问题。

但是我遇到的问题是列表显示在图像的底部。

我正在使用 Bootstrap 。

<div class="img_beef row col-lg-5 col-md-4 col-sm-4">
      <img class="beef_img img-responsive" id="beef_cut" src="images/beef.png" width="138px" height="357px" usemap="#imageMap" >
          <div class="cut_list col-lg-5 col-md-4 col-sm-4">
              <p>List of cuts</p>
              <ol>
                <li><a item="chuck_li" href="">Chuck , Hump</a></li>
                <li><a item="neck_li" href="">Neck</a></li>
                <li><a item="shin_li" href="">Shin</a></li>
                <li><a item="bolo_li" href="">Bolo</a></li>
                <li><a item="brisket_li" href="">Brisket</a></li>
                <li><a item="brisket01_li" href="">Brisket</a></li>
                <li><a item="flat_rib_li" href="">Flat Rib</a></li>
                <li><a item="prime_rib_li" href="">Prime Rib</a></li>
                <li><a item="short_rib_li" href="">Short Ribs</a></li>
                <li><a item="sirloin_li" href="">Sirloin</a></li>
                <li><a item="thin_flank_li" href="">Thin Flank</a></li>
                <li><a item="fillet_li" href="">Fillet</a></li>
                <li><a item="striploin_li" href="">Striploin</a></li>
                <li><a item="rump_li" href="">Rump</a></li>
                <li><a item="thick_flank_li" href="">Thick Flank</a></li>
                <li><a item="rump_li" href="">Rump</a></li>
                <li><a item="silver_li" href="">Silverside , Topside</a></li>
                <li><a item="shin_li" href="">Shin</a></li>
              </ol>
        </div>
    </div>

即使在 cut_list div 中使用 col-lg-5，它仍然做同样的事情。

.img_beef {
border-right:solid thin #dbdbdb;
margin-right: 70px;
z-index:1000;
}

.img_beef img {
}


.hidden-phone >.img_beef> border-right {
    display:none;
}

.cut_list {
    float:right;
}

.cut_list p {
}

.img_beef ol {
    text-decoration:none;
    color:#777777;
    font-size:10px;
}

.img_beef a {
    text-decoration:none;
    color:#777777;
}

.img_beef a:hover {
    text-decoration:none;
    color:#777777;
}

如果需要任何其他信息，请告诉我。我真的需要这方面的帮助。

Answer 1

问题似乎是您的嵌套列没有行。此外，如果您使用嵌套列，则应将列表和图像放在列中。

Bootstrap :http://www.bootply.com/bQZHDnNFgc

HTML:

<div class="row">
  <div class="img_beef col-lg-5 col-sm-4">
    <div class="row">
      <div class="col-lg-7 col-sm-8">
        <img class="beef_img img-responsive" id="beef_cut" src="images/beef.png" usemap="#imageMap" >
      </div>
      <div class="col-lg-5 col-sm-4">
        <p>List of cuts</p>
        <ol>
          <li><a item="chuck_li" href="">Chuck , Hump</a></li>
          <li><a item="neck_li" href="">Neck</a></li>
          <li><a item="shin_li" href="">Shin</a></li>
          <li><a item="bolo_li" href="">Bolo</a></li>
          <li><a item="brisket_li" href="">Brisket</a></li>
          <li><a item="brisket01_li" href="">Brisket</a></li>
          <li><a item="flat_rib_li" href="">Flat Rib</a></li>
          <li><a item="prime_rib_li" href="">Prime Rib</a></li>
          <li><a item="short_rib_li" href="">Short Ribs</a></li>
          <li><a item="sirloin_li" href="">Sirloin</a></li>
          <li><a item="thin_flank_li" href="">Thin Flank</a></li>
          <li><a item="fillet_li" href="">Fillet</a></li>
          <li><a item="striploin_li" href="">Striploin</a></li>
          <li><a item="rump_li" href="">Rump</a></li>
          <li><a item="thick_flank_li" href="">Thick Flank</a></li>
          <li><a item="rump_li" href="">Rump</a></li>
          <li><a item="silver_li" href="">Silverside , Topside</a></li>
          <li><a item="shin_li" href="">Shin</a></li>
        </ol>
      </div>
    </div>
  </div>
</div>