时间戳

首页 > 解决方案 > 制作完整的输入组四舍五入的引导程序 4

html - 制作完整的输入组四舍五入的引导程序 4

问题描述

我想像下面的例子一样舍入我的输入组： 模板示例

我只设法得到这个： 我的例子

我的代码：

.eersteKnop{
  color: #d32721;
  background-color: white;
}
.btn{
  font-family: 'LatoLight',sans-serif;
}
.round{
  border-radius: 20px !important;
}
.form-control{
  background-color: rgba(255,255,255,0.3);
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white !important;
  opacity: 1; /* Firefox */
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Rounded inputgroup</title>
</head>
<body>

            <div class="input-group mb-3">
                <input type="text" class="form-control round" placeholder="Email address" aria-label="emailaddress" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn eersteKnop round pl-4 pr-4" type="button">Send</button>
                </div>
            </div>

</body>
</html>

我必须使用相对/绝对位置还是可以用另一种方式解决这个问题？

感谢您的帮助，

亲切的问候，

珍妮

标签： htmlcssbootstrap-4

解决方案

You need the position: relative andz-index properties to clarify the stacking order. There are several ways to overlap these elements, but you can extend the input element to the right using negative margins.

.eersteKnop {
  color: #d32721;
  background-color: white;
}

.btn {
  font-family: 'LatoLight', sans-serif;
}

.input-group {
  position: relative;
}

.input-group-append, .form-control {
  position: relative;
  z-index: 3;
}

.round {
  border-radius: 20px !important;
  background: red!important;
}

.form-control {
  background-color: rgba(255, 255, 255, 0.3);
  margin-right: -20px;
  background: blue !important;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white !important;
  opacity: 1;
  /* Firefox */
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Rounded inputgroup</title>
</head>

<body>

  <div class="input-group mb-3">
    <input type="text" class="form-control round" placeholder="Email address" aria-label="emailaddress" aria-describedby="basic-addon2">
    <div class="input-group-append">
      <button class="btn eersteKnop round pl-4 pr-4" type="button">Send</button>
    </div>
  </div>

</body>

</html>

推荐阅读