Question

为什么按钮在块内联元素时表现得像块元素？输入标记也是内联的，因此下面的代码应该在水平方向上显示输入ang按钮，但是它们使用Bootstrap 4显示在另一个上面。

<button type="button" style="display: inline" class="btn btn-primary">C</button>
<input type="text" style="display: inline" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

Answer 1

.form-control有width: 100%;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" style="display: inline" class="btn btn-primary">C</button> 
<input type="text" style="display: inline" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

设置width: auto;并按预期显示inline

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" style="display: inline" class="btn btn-primary">C</button> 
<input type="text" style="display: inline; width: auto;" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

Answer 2

Bootstraps概念是一种网格布局结构，因此通过简单地对它们进行分组将使其工作正常，并且它将适当地缩放和使用可用空间（在这种情况下为宽度）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <span class="input-group-btn">
    <button type="button" class="btn btn-primary">C</button> 
  </span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

为什么按钮的行为类似于块元素？

2 个答案: