Как выровнять рендер этой страницы с bootstrap4, используя Visual Studio

Question

Я использую Visual Studio 2019 и bootstrap4 (что я новичок) для разработки веб-страницы для регистрации учетной записи.Рендер не кажется правильным.Я удаляю теги ASP из кода ниже.Я использую комбинацию кодов с www.w3schools.com/bootstrap4.Ниже приведен код, который я пробовал.

    <div class="form-inline">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">Country</span>
            </div>
            <select class="form-control"><option>1</option></select>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">Business Name</span>
            </div>
            <input type="text" class="form-control" placeholder="Business Name">
        </div>   
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    Street</span>
            </div>
            <input type="text" class="form-control" placeholder="Street, including Building number and Suite">
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-2 col-md-4">
            <div class="form-inline">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            City</span>
                    </div>
                    <input type="text" class="form-control" placeholder="City">
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-2 col-md-4">
            <div class="form-inline">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            State</span>
                    </div>
                    <select class="form-control"><option>1</option></select>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-2 col-md-4">
            <div class="form-inline">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            Zip code</span>
                    </div>
                    <input type="text" class="form-control" placeholder="Zip code"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-2 col-md-4">
            <div class="form-inline">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            Telephone</span>
                    </div>
                    <input type="text" class="form-control" placeholder="Telephone">
                </div>  
            </div>     
        </div>
        <div class="col-xs-12 col-sm-2 col-md-4">
            <div class="form-inline">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            Email Address</span>
                    </div>
                    <input type="text" class="form-control" placeholder="Email address">
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-2 col-md-4">
            <div class="form-inline">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            Website</span>
                    </div>
                    <input type="text" class="form-control" placeholder="Website">
                </div>
            </div>
        </div>
    </div>

Поля ввода не выровнены должным образом.Может кто-нибудь помочь, почему рендер не выравнивается должным образом?

Answer 1

После прочтения вопроса и комментариев кажется, что у вас проблемы с form-control, так как он не достигает полной ширины. Это потому, что у вас есть пользовательский файл CSS в папке Content структуры вашего проекта, который переопределяет поведение нескольких тегов. См:

Здесь вы можете видеть input,select,textarea теги, которые были переопределены, и вы можете просто удалить их или закомментировать, чтобы они стали на полную ширину:

UPDATE: Я также заметил, что ваш HTML для элементов управления вводом также является неправильным и не отформатирован. Вот правильная версия этого:

<style>
    .input-group {
        width: 100% !important;
    }
</style>
<div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-4">
                <div class="form-inline">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Country</span>
                        </div>
                        <select class="form-control">
                            <option>1</option>
                        </select>
                    </div>
                </div>


            </div>
            <div class="col-xs-12 col-sm-2 col-md-4">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Business Name</span>
                    </div>
                    <input type="text" class="form-control" placeholder="Business Name">
                </div>
            </div>
            <div class="col-xs-12 col-sm-2 col-md-4">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Street</span>
                    </div>
                    <input type="text" class="form-control" placeholder="Street, including Building number and Suite">
                </div>
            </div>

        </div>



        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-4">
                <div class="form-inline">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">City</span>
                        </div>
                        <input type="text" class="form-control" placeholder="City">
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-2 col-md-4">
                <div class="form-inline">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">State</span>
                        </div>
                        <select class="form-control">
                            <option>1</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-2 col-md-4">
                <div class="form-inline">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Zip code</span>
                        </div>
                        <input type="text" class="form-control" placeholder="Zip code">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-4">
                <div class="form-inline">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Telephone</span>
                        </div>
                        <input type="text" class="form-control" placeholder="Telephone">
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-2 col-md-4">
                <div class="form-inline">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Email Address</span>
                        </div>
                        <input type="text" class="form-control" placeholder="Email address">
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-2 col-md-4">
                <div class="form-inline">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Website</span>
                        </div>
                        <input type="text" class="form-control" placeholder="Website">
                    </div>
                </div>
            </div>
        </div>
    </div>

Смотрите вывод здесь.