Question

我有一个包含标签和输入的表单组

<div class="col-md-12 form-group">
     <label class="col-sm-2 col-form-label"  for="name">Name</label>
     <input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>

然而，标签显示在输入字段上方，我需要它在它的侧面。我安装了bootstrap 4.0。

我尝试过使用class =＆＃34; col-sm-2 col-form-label＆＃34;并且也不起作用。

有什么建议吗？

Answer 1

col-sm-2不应直接嵌套在col-md-12中。像这样使用网格......

https://www.codeply.com/go/Gdt1BZs9Hg

<form class="col-12">
  <div class="form-row">
     <label class="col-sm-2 col-form-label"  for="name">Name</label>
     <input type="text" class="form-control col-sm-10" name="name" id="name" [(ngModel)]="person.name" disabled/>
  </div>
</form>

请注意，form-row必须用于包含col-。 col-sm-10控制输入的宽度，因此您可以根据需要进行更改。在文档中阅读更多内容：https://getbootstrap.com/docs/4.0/components/forms/#form-grid

另外，请注意正确使用网格行＆gt;来自Bootstrap文档的列 ......

在网格布局中，内容必须仅放在列中列可以是行的直接子项...您也可以将.row替换为.form-row，这是我们标准网格行的一种变体，它覆盖了默认的列排水沟，以实现更紧凑和更紧凑的布局。

Answer 2

您可以使用课程form-inline

来实现它

<div class="form-inline">
    <div class="col-md-12 form-group">
         <label class="col-sm-2 col-form-label"  for="name">Name</label>
         <input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
    </div>
</div>

Answer 3

请参阅有关表单explode的bootsrap 4文档并使用<div class="col-md-12 form-group form-inline"> <label class="col-sm-2 col-form-label" for="name">Name</label> <input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/> </div>

from authlib.client import OAuth2Session

client_id = "my-client"
client_secret = "client secret"
token_url = "https://myhydraserver/token"
scope = 'openid email profile offline'
session = OAuth2Session(client_id, client_secret, scope=scope)

token = session.fetch_access_token(token_url)
print(token)

Answer 4

这对我来说适用于Bootstrap4。只需更改标签和输入的列大小以反映您想要标签的大小，请记住，这两个标签必须相加12。此外，请添加“ text-每个标签的“右”类，以使其在表单中右对齐而不是左对齐。我认为这是一种进步。

            <div class="form-group row">
                <label for="product_sku" class="col-sm-2 col-form-label">SKU (ID)</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" name="product_sku" value="" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="product_name" class="col-sm-2 col-form-label">Product Name</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" name="product_name" value="" required>
                </div>
            </div>

标签并在表单组的同一行输入

4 个答案: