Bootstrap 输入背景未覆盖整个输入

Question

所以我尝试使用 Bootstrap 开发一个简单的表单页面。但是，我想要一个与经典白色不同的背景颜色。因此，我通过覆盖“form-control”类的背景颜色添加了新的背景颜色（浅灰色）。

当我添加这个时，有时右侧的一部分被切断，我真的不知道为什么。当我添加颜色时发生了这种情况，所以我猜它与背景颜色有关。但为什么我不知道。这就是我问你的原因！:)

这是“输入”的图像：

这是受影响的代码：

<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700%7CRaleway:400,700&display=swap"

    rel="stylesheet">

   

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

.formKeepLeft {

    display: flex;

}

.skipLine {

    clear: left;

}

.form-control, .form-control:focus {

    width: 100%;

    border-radius: 0px;

    background-color: lightgray;

}

.skipLine {

    display: block;

}

</style>

<div class="row">

    <div class="col-6">

        <!--- Col 1 --->

        <form>

            <div class="formKeepLeft">

                <div class="form-group">

                    <label for="inputEmail">Namn</label>

                    <input type="input" class="form-control " size="100%" id="inputName" placeholder="">

                </div>

                <div class="form-group" style="padding-left: 10px;">

                    <label for="inputPassword">E-post</label>

                    <input type="email" class="form-control " size="100%" id="inputEmail" placeholder="">

                </div>

            </div>

            <!-- Form row 2 -->

            <div class="form-group skipLine">

                <label for="inputPassword">Ämne</label>

                <input type="input" class="form-control " size="100%" id="inputÄmne" placeholder="">

            </div>

        </form>

    </div>

</div>

当我调整页面大小时，它经常会被切断，例如，它可能适用于col-lg，但当我将其大小调整 为另一个大小时，有时会发生这种情况。我尝试使用背景大小但没有任何运气。

我想实现这个目标：

图片有点小，但基本上是一模一样的图片，只是没有剪掉右边的部分。有谁知道解决方案吗？我做错了什么？

谢谢，任何建议表示赞赏

Answer 1

只是因为border-radius，您可以添加border-width: 0;以消除该差距。<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700%7CRaleway:400,700&display=swap"&nbsp; &nbsp; rel="stylesheet">&nbsp; &nbsp;<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">&nbsp; &nbsp; &nbsp; &nbsp;<!-- JS files: jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><style>.formKeepLeft {&nbsp; &nbsp; display: flex;}.skipLine {&nbsp; &nbsp; clear: left;}.form-control, .form-control:focus {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; border-radius: 0px;&nbsp; &nbsp; background-color: lightgray;&nbsp; &nbsp; border-width: 0;}.skipLine {&nbsp; &nbsp; display: block;}</style><div class="row">&nbsp; &nbsp; <div class="col-6">&nbsp; &nbsp; &nbsp; &nbsp; <!--- Col 1 --->&nbsp; &nbsp; &nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="formKeepLeft">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="inputEmail">Namn</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="input" class="form-control " size="100%" id="inputName" placeholder="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group" style="padding-left: 10px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="inputPassword">E-post</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="email" class="form-control " size="100%" id="inputEmail" placeholder="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Form row 2 -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group skipLine">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="inputPassword">Ämne</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="input" class="form-control " size="100%" id="inputÄmne" placeholder="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </div></div>

Answer 2

添加边框：0；它会以不同的方式显示空间，有时其他角最好将边框设置为 0.form-control, .form-control:focus {&nbsp;width: 100%;&nbsp;border-radius: 0px;&nbsp;background-color: lightgray;&nbsp;border: 0;}