时间戳

首页 > 解决方案 > Bootstrap4：文本和文本区域宽度不同

html - Bootstrap4：文本和文本区域宽度不同

问题描述

我希望我的文本和文本区域具有相同的宽度。我不知道 col、lg、md、MB 和 sm 的作用。我已经尝试了很多。这是代码。请帮忙

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container-fluid">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading display-4" id="contact">Contact <span class="text-muted display-4">Us</span></h2>
<img class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" src="undraw_contact_us_15o2.png" width="70%" height="70%" xmlns="http://www.w3.org/2000/svg" focusable="false" role="img"></img>
</div>
<div class="form">
<form action="https://formspree.io/mzbjjlyy" method="POST" class="was-validated">
<div class="form-group mb-3">
<label>
Your email:
<input type="text" name="_replyto" class="form-control" placeholder="Enter email" id="email" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</label>
</div>
<div class="form-group">
<label for="msg">
Your message:
<textarea name="message" class="form-control mb-3" placeholder="Enter your message" id="msg" rows="5" required></textarea>
</label>
<br>
<button type="submit" class="btn btn-primary btn-lg">Send</button>
</form>
</div>
</div>
</div>

还有，我在哪里可以了解它

标签： htmlbootstrap-4

解决方案

你的错误在这里。在添加之前关闭label标签textarea。检查此链接https://getbootstrap.com/docs/4.5/layout/overview/了解引导布局类的工作方式。

<label for="msg">
    Your message:
</label>
    <textarea name="message"  class="form-control mb-3" placeholder="Enter your 
    message" id="msg" rows="5" required>
</textarea>

推荐阅读