首页 文章

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

提问于
浏览 次
5

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

<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 =“col-sm-2 col-form-label”并且也不起作用 .

有什么建议？

css angular twitter-bootstrap bootstrap-4

3 回答

  • 6

    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

    另外，请注意Bootstrap文档中的 correct use of the grid row > columns ...

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

    回复于
  • 4

    您可以使用类 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>
    回复于
  • 1

    请参阅有关Forms https://getbootstrap.com/docs/4.0/components/forms/#inline-forms的bootsrap 4文档并使用 form-inline

    <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>
    回复于

相关问题