html - Bootstrap如何在div内保持文本无响应?

标签 html css twitter-bootstrap

在移动设备中,文本如下所示:

enter image description here

但我需要像这样保持:

![enter image description here

我正在使用的代码:

<div class="container-fluid">
    <div class="row" style="background-color:#071885;">
        <div class="col-md-12 text-center">     
            <h1 style="color: #000;font-weight: bold;background: gold;font-size: 24px; padding: 5px;">
            LONG TITLE LONG TITLE LONG TITLE LONG TITLE LONG TITLE
            </h1>
         </div>
    </div>
    </div>


我已经尝试过no-wrap,但是没有用。

更新:

@kukkuz

enter image description here

最佳答案

您可以为此使用flexbox:


在行上设置display: inline-flex并利用内联元素将扩展到其内容的事实。
现在,您可以使用text-nowrap类或white-space: nowrap来获得所需的效果-请参见下面的演示:




.row {
  display: inline-flex; /* ensures the text stays inside */
  white-space: nowrap;
  min-width: 100vw; /* sets 100% width in desktop */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
  <div class="row" style="background-color:#071885;">
    <div class="col-md-12 text-center">
      <h1 style="color: #000;font-weight: bold;background: gold;font-size: 24px; padding: 5px;">
        LONG TITLE LONG TITLE LONG TITLE LONG TITLE LONG TITLE
      </h1>
    </div>
  </div>
</div>

关于html - Bootstrap如何在div内保持文本无响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55068410/

相关文章:

php - MIME 类型欺骗

html - 表格列从右到左开始

css - CSS和Safari:图片位置

css - Polymer 2.0 样式模块共享样式在网页上打印 css 源

jquery - 为什么我的输入在 Bootstrap 中格式不正确

html - 减少 Glyphicon 的重量

html - href 语法 : is it okay to have space in file name

javascript - 剑道窗口-提交时不要关闭窗口

javascript - 在Django模板的内部CSS中使用上下文变量

jquery - Bootstrap 4-通过单个按钮操作显示一个div并隐藏另一个div