Question

我正在尝试使用bootstrap 3来布局页面元素，因为它是基础。我对大多数布局都很满意，但是我正在尝试创建一个特定的布局。

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

用镀铬看着它，尽管有图像，第一行似乎没有高度。

这里有一些我不知道或不明白的东西。

更新主容器中的图像绝对位于-50％顶部以处理超大图像。主容器设置为相对容器。

这是我正在尝试创建的图像（90％存在） enter image description here

我在这里创建了一个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>

bootstrap 3布局重叠 - 缺乏理解

1 个答案: