css - bootstrap 3布局重叠-缺乏理解

Question

我正在尝试使用 bootstrap 3 作为基础来布局页面元素。我对大部分布局都没有问题，但我在尝试创建特定布局时遇到了问题。

使用标准容器 > 行 > 列方法，第一行只包含一个图像，第二行是一个导航类型面板，它位于图像下方。相反，它出现在顶部。

尽管有图片，但用 chrome 查看第一行似乎没有高度。

这里有些东西我遗漏了或不明白。

更新主容器中的图像绝对定位为 -50% top 以处理超大图像。主容器设置为相对的。

这是我要创建的图像(90% 在那里)

我在这里创建了一个 jsfiddle:http://jsfiddle.net/longestdrive/vt24K/

html如下:

<div id="hole-stats-modal">
<div class="container" >
    <div class="row">
        <div class="col-sm-12">
            <!-- image -->
            <img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" />
        </div>

    </div>     
    <!-- hole stat panel -->
    <div id="hole-stats-panel" class="transparent-back">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <!-- side stats -->
                    <h3>Hole Detail</h3>
                    <p>Content for this panel</p>
                </div>
            </div>
        </div>
    </div>
    <!-- hole text info -->
    <div id="course-guide" class="transparent-back">
        <div class="container">
            <div class="row">
                <div class="col-sm-1">
                    <h3 id="hole-n-2" >3</h3>

                </div>
                <div id="hole-description" class="col-sm-8 ">
                    <p>Some text here</p>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div class="row">
      <div class="hole-navigation">
          <div class="container">
              <div class="row">
                  <ul class="unstyled list-inline">

                      <li><a href="1">1</a></li>
                      <li><a href="2">2</a></li>
                      <li><a href="3">3</a></li>
                      <li><a href="4">4</a></li>

                  </ul>
              </div>
          </div>
      </div>
  </div>
 </div>  

球洞统计面板和球洞信息面板正确显示在我期望的位置，但导航面板没有显示

感谢任何帮助

Answer 1

我认为您有比需要更多的容器和行。我使用更少的元素重新创建了您正在寻找的内容。

您实际上只需要两行，一行用于图像，另一行用于底部导航。

jsFiddle Demo

<div id="hole-stats-modal">
    <div class="container">
        <div class="row">
            <div class="col-sm-12"> <!--optional-->
                <div class="image"> <!-- Relative Pos with image as background -->
                    <div class="right-overlap transparent-back">...</div><!-- Absolute Pos to right-->
                    <div class="bottom-overlap transparent-back">...</div><!-- Absolute Pos ro bottom-->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12"><!--optional-->
                <div class="hole-navigation">
                    </ul></ul> <!--Nav-->
                 </div>
            </div>
        </div>
    </div>
</div>