Bootstrap输入背景无法覆盖整个输入

debugcn 发表于 Dev

杜布斯特德

因此，我正在尝试使用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>

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

它往往会在中间断开，当我调整页面大小，因此，例如，它可能会为工作COL-LG但是当我调整它为另一尺寸此有时会发生。我尝试使用背景大小，但没有任何运气。

我想实现这一目标：

图像有点小，但是基本上它是完全相同的图像，但是没有切掉右边的部分。有人知道解决方案吗？我做错了什么？

谢谢，任何建议表示赞赏

Nisharg Shah

仅仅是因为border-radius，您可以添加border-width: 0;以消除该差距。

<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">
       
<!-- 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 {
    display: flex;
}

.skipLine {
    clear: left;
}

.form-control, .form-control:focus {
    width: 100%;
    border-radius: 0px;
    background-color: lightgray;
    border-width: 0;
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。