我在 Bootstrap 4 Beta 3 中创建了一个输入组。
自 Beta 3我必须使用 input-group-append 和 input-group-prepend 类。
但我不知道如何在输入组的末尾使用这些类。
我的输入组中的最后一个按钮末尾没有圆角边缘 - 或者在我的第二个示例中圆角边缘太多 - 或者在第三个例子是一个巨大的轮廓。
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>
First try
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button">B1</button>
<button class="btn btn-outline-primary" type="button">B2</button>
<button class="btn btn-outline-primary" type="button">B3</button>
<button class="btn btn-outline-primary" type="button">B4</button>
</div>
</div>
second try
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button">B1</button>
<button class="btn btn-outline-primary" type="button">B2</button>
<button class="btn btn-outline-primary" type="button">B3</button>
</div>
<button class="btn btn-outline-primary" type="button">B4</button>
</div>
third try
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button">B1</button>
<button class="btn btn-outline-primary" type="button">B2</button>
<button class="btn btn-outline-primary" type="button">B3</button>
</div>
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button">B4</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>最佳答案
这是您使用它们的方式:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="column">
<div class="row">
<div class="col-8 offset-2">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
</div>
</div>因此，为了解决这个问题，您首先要有一个带有 input-group 类的 div。
然后在第一个 div 中放置一个带有 input-group-prepend 类的 div。
然后，在该 input-group-prepend div 中放置一个包含类 input-group-text 的跨度和您选择的 id。
然后，您创建一个输入元素作为 div 类 input-group-prepend 的同级，并添加 aria-scribedby="basic-addon1" 到该输入元素。而 basic-addon1 需要替换为您在上一步中选择的 ID。
在附加时，带有 input-group-append 类的 div 作为输入元素之后的同级元素。
添加按钮时，您可以这样做:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>再次，具有类 input-group-append 的 div 作为前一个输入元素之后的同级元素。然后在该 div 内放置按钮。
所以，基本上，只需记住一个简单的规则:
必须将具有 input-group-prepend 类的 div 添加为在输入元素之前的同级元素。
并且必须将具有 input-group-append 类的 div 添加为输入元素之后的同级。
然后你可以将任何你想要的内容放入该 div 中。
关于html - 使用 beta 3 前置/附加创建 Bootstrap 4 输入组不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48221504/