Bootstrap如何在div内保持文本无响应？

Question

在移动设备中，文本如下：

但是我需要它保持这样：

我正在使用的代码：

<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

Answer 1

您可以为此使用flexbox：

1. 在行上设置display: inline-flex，并利用内联元素将扩展到其内容的事实。

2. 现在您可以使用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>

Answer 2

删除此类<input> <input> <input disabled> <input> <input> <input disabled> <input> <input>并设置所需的样式