html - Bootstrap 表单输入标签需要内联

标签 html css twitter-bootstrap

我使用 bootstrap css 创建了一个表单,我需要标签显示在输入字段内,通常这是自动发生的,这次没有人能帮忙吗?

<style>

    #form-inpt{
        width: 200px;
    }

</style>

<form>

    <!-- Name and email -->
    <label>Name</label><input id="form-inpt" class="form-control" type="text" name="name">
    <label>Email Address</label><input id="form-inpt" class="form-control" type="text" name="email">

    <!-- Business information -->
    <label>Company Name</label><input id="form-inpt" class="form-control" type="text" name="CompanyName">
    <label>Company Phone Number</label><input id="form-inpt" class="form-control" type="text" name="CompanyPhone">
    <label>Address Line 1</label><input id="form-inpt" class="form-control" type="text" name="Address1">
    <label>Address Line 2</label><input id="form-inpt" class="form-control" type="text" name="Address2">
    <label>Address Line 3</label><input id="form-inpt" class="form-control" type="text" name="Address3">
    <label>Town</label><input id="form-inpt" class="form-control" type="text" name="Town">
    <label>County</label><input id="form-inpt" class="form-control" type="text" name="County">
    <label>Post Code</label><input id="form-inpt" class="form-control" type="text" name="PostCode">
    <label>Opening Hours</label><textarea id="form-inpt" class="form-control" name="OpeningHours"></textarea>
    <label>Website</label><input id="form-inpt" class="form-control" type="text" name="Website">

    <!-- Google map coordinates -->
    <label>Longitude</label><input id="form-inpt" class="form-control" type="text" name="Longitude">
    <label>Latitude</label><input id="form-inpt" class="form-control" type="text" name="Latitude">

    <!-- Anti spam -->
    <label>Anti Spam, What is 9+1?</label><input id="form-inpt" class="form-control" type="text" name="Spam">

    <!-- Button -->
    <label>Submit</label><input class="form-control" type="submit" value="submit" style="width: 200px;>

</form>

最佳答案

尝试使用 bootstrap div 类,例如,

<div class="row">
    <div class="row">
        <label Id="1">...</label><input ...../>
    </div>
    <div class="row">
        <label Id= "2">...</label><input ...../>
    </div>
    .
    .
    .
</div>

关于html - Bootstrap 表单输入标签需要内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32396773/

相关文章:

php - 使用 Ruby on Rails 保护数据?

javascript - Jquery 幻灯片可以离线使用,但不能在线使用

php - 转义CSS中的特殊字符

javascript - 悬停时更改元素的宽度和高度

javascript - Angular-Strap 的 "Aside"窗口的大小可以减小或增大吗?

html - 悬停时编辑链接

html - 检查是否所有标签都已关闭

html - 文件上传控制和 GWT 外观

visual-studio - 如何在 Visual Studio 2019 上使用 Bootstrap 5 和 Sass

javascript - Bootstrap : Prevent Scrolling in LG or larger, 启用 MD 或更小的滚动