gcogco10 Ответов: 1

Как выровнять ваш класс div слева направо в bootstrap?

Привет Команда

Я изо всех сил пытаюсь выровнять свой класс div слева направо, я хочу, чтобы мой поиск fa-fa был слева, а кнопка справа. То, что я попробовал, как показано ниже, все еще не работает так, как я хочу, и мне нужна некоторая помощь в выравнивании с помощью класса bootstrap div, который делает это.

Что я уже пробовал:

<center>
            <center>
                <form class="md-form">
                    <div class="file-field">
                        <div class="btn btn-primary btn-sm float-left">
                            <span>Choose file</span>
                            <input type="file">
                        </div>
                        <div class="file-path-wrapper">
                            
                            <input class="file-path validate" type="text" placeholder="Upload your file">
                        </div>
                    </div>
                </form>
            </center>

        
                <div class="form-group row">
                    <div class="input-group col-md-4">
                        <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
                        <span class="input-group-append">
                            <button class="btn btn-outline-secondary border-left-0 border" type="button">
                                
                            </button>
                        </span>
                    </div>
                </div>
        </center>
    </div>
  
</center>

1 Ответов

Рейтинг:
9

Richard Deeming

Нет fa fa-search элемент в вашем коде.

Предполагая, что вы хотите, чтобы он был частью той же входной группы, что и кнопка, вам просто нужно добавить его с правильным классом:

<div class="form-group row">
    <div class="input-group col-md-4">
        <div class="input-group-prepend">
            <span class="fa fa-search" aria-hidden="true"></span>
        </div>
        <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary border-left-0 border" type="button">
                
            </button>
        </div>
    </div>
</div>
Входные группы · загрузочный В4.5[^]

Кроме того, прекратите использовать <center> метка. Он устарел уже более 20 лет назад.