Jquery 用Bootstrap实现表单

我想设计一个如下图所示的表单：

我尝试了以下代码：

<form>

          <div class="form-group form-inline">
            <label for="exampleInputPassword1">Navn:</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="" data-required="true" name="navn">
          </div>

          <div class="form-group form-inline">
            <label for="exampleInputPassword1">Bedrift:</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="" data-required="true" name="bedrift">
          </div>


          <div class="form-group form-inline">
            <label for="exampleInputPassword1" class>Tlf:</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="" data-required="true" name="tlf">
          </div>

          <div class="form-group form-inline">
            <label for="exampleInputEmail1">Mailadresse:</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="" data-required="true" name="mailadresse">
          </div>

          <input id="input-region" type="hidden" name="region" value="">
          <button type="submit" class="btn btn-primary">Send</button>
        </form>

导航：
床缝：
Tlf：
邮寄地址：
发送

但结果并不是我所期望的

---

我需要将标签和输入放在一个白色框中，而不使用标签作为占位符。

我想你想使用占位符功能吗

导航：
床缝：
发送

您可以使用占位符功能

检查此代码段

正文{
背景：蓝色；
}
输入{
保证金：5px；
左边距：20px；
}
形式{
显示器：flex；
弯曲方向：立柱；
宽度：500px；
}
钮扣{
自对准：居中；
宽度：100px；
}

发送

为什么结果不是您期望的结果？Bootstrap没有任何组件可以自己完成您想要的功能。您需要用自己的代码覆盖css和/或修改HTML。可能应该为

表单组

提供白色背景，并删除

表单控件

元素上的边框。