Question

主要修改，请重新打开

使用Bootstrap 2.3.2创建一个页面，该页面稍后将成为Joomla 3.x的模板在标题中，我有6个元素。我能够如下所示定位它们。

问题

将nav-pills部分放置在image为background-image的容器底部。

在margin-top的{{1}}容器上设置.minimenu确实有效，但将其与顶部相关联。我想将它与底层联系起来。
nav-pills已尝试无解。

HTML code：

vertical-align: bottom;

CSS：

<div class="container">
    <p class="headtitle">This is the Headline on Top!</p>
    <div class="header">
        <img src="http://www.chris-nlp-hall.com/tmp/logo1.png" class="pull-left logo1" />
        <img src="http://www.chris-nlp-hall.com/tmp/logo2.png" class="pull-right logo2" />
        <div class="mininav">
            <ul class="nav nav-pills">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
            </ul>
        </div>
    </div>
    <div class="navbar">
        <div class="navbar-inner">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Learn</a></li>
                <li><a href="#">More</a></li>
            </ul>
        </div>
    </div>
</div>

看到这个更新的小提琴：https://jsfiddle.net/michi001/srzwz8o4/

Answer 1

在引导程序中，您可以使用pull-left和pull-right类作为徽标，并且可以使用父div中的text-center类来居中导航。背景的最佳选择似乎是使用background-image通过CSS放置它。

Answer 2

那你为什么不把absolute放在底部呢？

.mininav{
  position: absolute;
  bottom: 0px;
  width: 100%;
}

您还需要将.header设置为亲戚：

.header { position:relative; }

Answer 3

.mininav {
right: 0;
left: 0;
bottom: 0;
min-height: 30px; /*or other value*/
max-height: 30px; /*or other value*/ 
position: absolute;
}

.mininav p {
line-height: 30px;
}

Answer 4

.header {
  position: relative;
  background-image: url(http://www.chris-nlp-hall.com/tmp/center.png);
  background-position: center top;
  background-repeat: no-repeat;
  height: 160px;
}

.mininav {
  text-align: center;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

在.header和修改后的.mininav类

中添加了相对位置

我已修复您的问题JS Fiddle

如何将元素放在容器的底部？

问题

4 个答案: