Как совместить два изображения в теге рядом друг с другом? - PullRequest
Новая
       0

Как совместить два изображения в теге рядом друг с другом?

0 голосов
/ 18 марта 2020

Я использую кнопку двух изображений и помещаю их в тег a в том же столбце bootstrap. Однако вот как они выглядят:

enter image description here

Это мой код: 

<body>

    <div class="backgroundImage">
        <div class="text-right p-3">
            <a href="/register-dealer " class="btn p-2"><b>{{ __('Be A Dealer') }}</b></a>
        </div>


        <div class="container mt-4 mb-4">
            <div class="row">
                <div class="col-4 col-md-4 mx-auto my-auto">
                    <img class="mw-100" src="{{ asset('storage/logo/Bujishu_logo.png') }}" alt="Bujishu">
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row mb-4">
                <div class="col-12 col-md-8 offset-md-2 text-center">
                    <h2 class="bujishu-motto">
                        A home is made of
                        <i>
                            <p class="bujishu-recursive">hopes</p>
                        </i>
                        and
                        <i>
                            <p class="bujishu-recursive">dreams</p>
                        </i>
                    </h2>
                    <h2 class="bujishu-motto">
                        Let us
                        <i>
                            <p class="bujishu-recursive">inspire</p>
                        </i>
                        you to build the perfect home!
                    </h2>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-6 col-md-4 offset-md-3 ">
                    <a href="/login " class="grad2"><img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login"></a>

                {{-- </div>

                <div class="col-6 col-md-4  "> --}}

                    <a href="/register" class="grad2"><img class="landing_button"  src="{{ asset('storage/buttons/Sign-Up.png') }}" alt="Sign Up"></a>
                </div>
            </div>
        </div>

    </div>

    </div>
</body>

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

Ответы [ 3 ]

1 голос
/ 18 марта 2020

Используйте d-flex и укажите класс в col. 

<div class="col-6 col-md-4 offset-md-3 d-flex">

Вы также можете добавить класс pl-3 к кнопке SIGN UP для пробела между кнопками.

0 голосов
/ 18 марта 2020

столбцы всей строки составляют около 12 столбцов, поэтому должно быть col-md-6 или добавить d-flex к самой строке. 

<div class="row mt-4">
            <div class="col-6 col-md-6 ">
                <a href="/login " class="grad2"><img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login"></a>

            </div>

            <div class="col-6 col-md-6  ">

                <a href="/register" class="grad2"><img class="landing_button"  src="{{ asset('storage/buttons/Sign-Up.png') }}" alt="Sign Up"></a>
            </div>
        </div>
0 голосов
/ 18 марта 2020

Если вы используете Bootstrap 4, это будет работать, если вы используете два столбца, каждый из которых имеет размер 6, или вы можете соответствующим образом изменить размер столбцов. 

<body>
<div class="backgroundImage">

            <div class="text-right p-3">
                <a href="/register-dealer " class="btn p-2"><b>{{ __('Be A Dealer') }}</b></a>
            </div>


            <div class="container mt-4 mb-4">
                <div class="row">
                    <div class="col-4 col-md-4 mx-auto my-auto">
                        <img class="mw-100" src="{{ asset('storage/logo/Bujishu_logo.png') }}" alt="Bujishu">
                    </div>
                </div>
            </div>

            <div class="container">
                <div class="row mb-4">
                    <div class="col-12 col-md-8 offset-md-2 text-center">
                        <h2 class="bujishu-motto">
                            A home is made of
                            <i>
                                <p class="bujishu-recursive">hopes</p>
                            </i>
                            and
                            <i>
                                <p class="bujishu-recursive">dreams</p>
                            </i>
                        </h2>
                        <h2 class="bujishu-motto">
                            Let us
                            <i>
                                <p class="bujishu-recursive">inspire</p>
                            </i>
                            you to build the perfect home!
                        </h2>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-6 col-md-6">
                        <a href="/login " class="grad2"><img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login"></a>

                    </div>

                    <div class="col-6 col-md-6">

                        <a href="/register" class="grad2"><img class="landing_button"  src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Sign Up"></a>
                    </div>
                </div>
            </div>

        </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...