Question

使用Booking标题排列Back文本（将其放在左侧）的最佳方法是什么？我在覆盖Bootstrap主题时遇到了一些困难。此外，如果我想在右侧也有一些文字，我该怎么做？

HTML

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-brand">Booking</div>
    <div>Back</div>
  </div>
</nav>

CSS

.navbar {
    background-color: #0088CC;
    padding-left: 0em !important;
    padding-right: 0em !important;
}
.navbar-brand {
    color: #fff !important;
    padding-left: 0em !important;
    padding-right: 0em !important;
    text-align: center;
    margin: 0 auto !important;
    width: 100%;
    display: inline !important;
}
nav > .container {
    width: 100%;
}

Fiddle here

Answer 1

开箱即用，在这种情况下使用span - 它们是内联元素，而div是块。当然，可以通过将显示设置为内联/内联块或使用浮动等来覆盖它...

但是，在您的情况下，最佳解决方案似乎是将容器设置为相对位置，然后使用绝对定位放置左侧和右侧元素。

所以，像这样：

.navbar-right {
    position: absolute;
    right: 10px;
    top: 10px;
}

http://jsfiddle.net/d9nhqbyt/1/

这是一个在div中使用两个浮动跨度的示例（更好的方法）：http://jsfiddle.net/d9nhqbyt/2/

排队＆＃34;返回＆＃34;带标题的文字

1 个答案: