boostrap文本框仅显示一行

Question

我不知道为什么，但是我的文本框只显示一行文本。因此，文本框只是显示文本的一条细线。我将行号设置为5，但仍然没有任何改变。我想在适当大小的文本框中显示我的文本。

<div class='textbox'>
    <div class='offset-md-0'>
        <label for='comment'>Persoenlicher Kommentar:</label>
        <pre class = 'form-control' id='comment' rows='5'>$p_text</pre>
        <div id='charNum'></div>
    </div>
</div>

Answer 1

form-control类具有固定的高度。这是造成您的问题。要解决此问题，请将pre标签更改为另一个标签，然后添加h-auto类。

使用具有特定高度的textarea标签是暂时的且较差的解决方案。如果您的文本发生更改并且或多或少地占用了文本，则必须更改高度以匹配。一旦您拥有这些块中的每个块的高度，您就会感到一团糟。

您也可以省去此类，并使用其他引导实用程序来获得类似的结果。

检查以下内容：https://jsfiddle.net/aqu20gxw/

Answer 2

rows属性仅适用于textarea元素：

<textarea class="form-control" id="comment" rows="5">$p_text</textarea>

如果您不希望用户编辑内容，请使用readonly属性，或使用自定义CSS规则height将文本包装到另一个元素中。

<p class="form-control" id="comment">$p_text</p>

<style>
  #comment {
    height: 10rem;
  }
</style>

Answer 3

使用引导textarea标签可以获得更好的输出。您可以通过参考Get started with bootstrap

进行检查

Answer 4

您可以改用textarea

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<textarea class="form-control" rows="4"  placeholder="Message" readonly > hello</textarea>

Answer 5

使用<texarea>标记代替<pre>

<textarea class="form-control" id="comment" rows="5">your data($p_text)</textarea>