防止导航栏右侧的文本在导航栏中换行? [英] Prevent navbar-right text from wrapping in navbar?

问题描述

在 这个 Bootply 示例中，我如何防止 navbar-right在移动视图中换行的文本?我希望所有文本都保留在一行上，随着页面宽度的缩小而逐渐靠近，即.在桌面视图中看到的内容的压缩版本.在任何给定的宽度下，两边的边距应该是 Bootstrap 在该宽度下通常会做的.

解决方案

由于 navbar-right 在较小的屏幕宽度时受到 Bootstrap CSS 的影响，您可以交替使用 pull-left 和 向右拉...

<div class="容器"><p class="navbar-text pull-left">左文字</p><p class="navbar-text pull-right">右侧文本</p>

</nav>

In this Bootply example, how do I prevent the navbar-right text from wrapping in the mobile view? I want all the text to stay on one line, getting progressively closer as the width of the page shrinks, viz. a compressed version of what is seen in the desktop view. At any given width, the margins on either side should be what Bootstrap would normally do at that width.

解决方案

Since navbar-right is impacted by the Bootstrap CSS at smaller screen widths, you can alternately use pull-left and pull-right..

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <p class="navbar-text pull-left">Left Text</p>
    <p class="navbar-text pull-right">Right Text</p>
  </div>
</nav>

这篇关于防止导航栏右侧的文本在导航栏中换行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！