Html Boostrap 4表单混乱对齐

我有下面的代码，它呈现的与我在添加表单标记时所期望的不同。 尝试删除表单标记以查看差异

你好，世界！
html，正文{
身高：100%；
}
.min-100{
最小高度：100%；
}
丰多先生{
背景图像：url（'https://source.unsplash.com/uR6dIgDnt38/1920x1080');
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.sombra{text shadow:1px 1px 2px rgb（0,0,0）；}
标题
瓜达尔
一段话

您的表单标签应该有一个

col-sm-12

类

<form action="" class="col-sm-12">
...
</form>

...

使用以下代码更改表单代码：

<form action="" class="col-sm-12">

                      <div class="row">
                        <div class="form-group col-md-12">
                          <div class="input-group mb-3">
                            <div class="input-group-prepend">
                              <span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
                            </div>
                            <input type="text" class="form-control" placeholder="Upload File">
                            <div class="input-group-append">
                              <button class="btn btn-success">Guardar</button>
                            </div>
                          </div>
                        </div>
                      </div>

                      </form>

瓜达尔

对齐它，您应该只在row类内部使用col类。

你好，世界！
html，正文{
身高：100%；
}
.min-100{
最小高度：100%；
}
丰多先生{
背景图像：url（'https://source.unsplash.com/uR6dIgDnt38/1920x1080');
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.sombra{text shadow:1px 1px 2px rgb（0,0,0）；}
标题
瓜达尔
一段话

试试这个结构。这对你来说很容易

.fondo{
背景图像：url（'https://source.unsplash.com/uR6dIgDnt38/1920x1080');
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
高度：100vh
}
.sombra{text shadow:1px 1px 2px rgb（0,0,0）；}

你好，世界！
标题
瓜达尔
一段话

add

class=“w-100”

到您的表单标签add

w-100

from

form

标签