Question

我在Bootstrap 4 Beta 3 中创建了一个输入组。由于Beta 3我必须使用input-group-append和input-group-prepend类但是我不知道如何在输入组的末尾使用这些类。
输入组中的最后一个按钮在末尾没有圆角 - 或者在我的第二个例子中没有太圆的边缘 - 或者在第三个例子是一个大规模的轮廓。

＆＃13;

<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>

＆＃13;

Answer 1

这就是你使用它们的方式：

＆＃13;

<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>

＆＃13;

所以，为了解决这个问题，你首先要有一个类input-group的div。

然后在第一个div中放入一个带有input-group-prepend类的div。

然后，在input-group-prepend div中，您将一个带有input-group-text类的范围和您选择的ID。

然后，您将输入元素作为兄弟创建到类input-group-prepend的div，并将aria-describedby="basic-addon1"添加到该输入元素。而basic-addon1需要替换为您在上一步中选择的ID。

在追加时，带有input-group-append类的div在输入元素之后作为兄弟出现。

添加按钮时，您可以这样做：

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

同样，具有类input-group-append的div作为前一个输入元素之后的兄弟。在那个div中你放了你的按钮。

所以，基本上，只需记住一条简单的规则：

必须将包含班级input-group-prepend的div添加为输入元素之前的兄弟。并且必须将包含类input-group-append的div添加为输入元素的兄弟。

然后你把任何你想要的东西放在那个div里。

Answer 2

你需要先使用prepend＆amp; amp;在你需要的地方追加。

如下面的代码段 -

std::string String::join(const std::vector<std::string> &lst, const std::string &delim)
{
    std::string ret;
    for(const auto &s : lst) {
        if(!ret.empty())
            ret += delim;
        ret += s;
    }
    return ret;
}

创建Bootstrap 4输入组，其中beta 3 prepend / append不起作用

2 个答案: