Question

<div className="form-inline">
    <label>1.</label><br />
    <input type="text" className="form-control" />
</div>

使用bootstrap，为什么当我输入100％表格时会破坏？ https://jsfiddle.net/bdw9eyme/

如何使标签和输入处于同一行并输入将填充屏幕的其余部分？

Answer 1

你不应该使用br来创建一个中断，你可以使用CSS。您还应该将input嵌套在label中，或将for属性与label一起使用，以链接到id上的input }。

将flex设置为input的行flex-grow: 1会将input放在label文本中，并生成input成长为占用可用空间。

input {
  flex-grow: 1;
  margin-left: 1em;
}
.fw {
  display: flex;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div className="form-inline">
  <label class="fw">1. <input type="text" className="form-control"></label>
</div>

Answer 2

我认为这就是你要找的东西

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="form-group">
  <label class="col-xs-2">1.</label>
  <div class="col-xs-10">
  <input class="form-control" type="text"/>
  </div>
</div>
</body>

引导形式内联使输入全宽

2 个答案: