代码之家 › 专栏 › 技术社区 › MrMaavin

输入组中间有预备元素?

bootstrap-4 twitter-bootstrap css

MrMaavin · 技术社区 · 6 年前

我可以用额外的css解决它,但这不是我想要的。

仅引导 和密码?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group input-group-sm m-4 w-50">
  <input class="form-control" type="text">
  <div class="input-group-prepend">
    <div class="input-group-text">@</div>
  </div>
  <input class="form-control"></input>
</div>

1 回复 | 直到 6 年前

MrMaavin 6 年前

解决办法很简单。

input-group-prepend input-group-append 在一起

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group input-group-sm w-50 m-4">
  <input class="form-control" type="text">
  <div class="input-group-prepend input-group-append">
    <div class="input-group-text">@</div>
  </div>
  <input class="form-control"></input>
</div>

推荐文章

seriously · 按钮中元素的对齐

2 年前

USK · 引导模型在我的HTML文件中不起作用

2 年前

onit · 如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

user9644796 · 如何检查折叠的导航栏是否打开?

6 年前

JoeSlav · 使用引导上载损坏的文件

6 年前

John · 引导程序4,表单内联未在XS视图上对齐

6 年前

J. Sparks · 奇怪的图像定位(HTML、CSS、Bootstrap)

6 年前

user9719859 · 如何在bootstrap 4中更改选择选项programmaticaly?

6 年前

im5an · 如何使用angular在单行中显示徽标和导航栏?

6 年前