Bootstrap входная группа неправильно отображается на мобильных устройствах - PullRequest
Новая
       7

Bootstrap входная группа неправильно отображается на мобильных устройствах

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

В div .container-Fluid у меня есть этот html код: 

<div class="row mb-2">
        <div class="col-md-3">
            <a href="<?php echo $host; ?>" title="<?php echo html($site_config['logo_text']); ?> - <?php echo html($site_config['logo_slogen']); ?>" class="header_logo_to_link">
                <img src="<?php echo $host; ?>/images/assets/logo_33.png" alt="<?php echo html($site_config['logo_text']); ?> - <?php echo html($site_config['logo_slogen']); ?>" class="img-responsive footer_logo_image" />
            </a>
        </div>
        <div class="col-md-6">
            <form id="FooterNewsletterForm" method="post">
                <h4 class="footer_title">Feliratkozás a hírlevélre</h4>
                <div class="row">
                    <div class="col-6 mb-3">
                        <input type="text" class="form-control footer_newsletter_input" placeholder="Név" name="NewsletterVname" id="NewsletterVname" />
                    </div>
                    <div class="col-6 mb-3 input-group">
                        <input type="text" class="form-control footer_newsletter_input" placeholder="E-mail cím" name="NewsletterEmail" id="NewsletterEmail" />
                        <div class="input-group-append">
                            <button class="btn btn-default footer_newsletter_button" id="NewsletterButton" name="NewsletterButton" type="submit">Feliratkozás</button>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="checkbox checkbox_allow_div mb-2 custom-control custom-checkbox">
                    <input type="checkbox" name="allow" id="nws_accept" value="1" class="allow_checkbox custom-control-input">
                    <label class="label_300 custom-control-label" id="nws_accept_label" for="nws_accept"><?php echo gdpr_text('gdpr_newsletter_text'); ?></label>
                </div>
            </form>
        </div> 
        <div class="col-sm-12 col-md-3">
            <h4 class="footer_title">Közösségi oldalaink</h4>
            <?php
            if($site_config['k_fb'] != "" )
            {
                echo '<div class="footer_social_divs float-left mr-3">
                        <a href="'.html($site_config['k_fb']).'" title="Facebook" target="_blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
                     </div>';
            }
            if($site_config['k_twitter'] != "" )
            {
                echo '<div class="footer_social_divs float-left mr-3">
                        <a href="'.html($site_config['k_twitter']).'" title="Twitter" target="_blank"><i class="fab fa-twitter-square" aria-hidden="true"></i></a>
                     </div>';
            }
            if($site_config['k_youtube'] != "" )
            {
                echo '<div class="footer_social_divs float-left mr-3">
                        <a href="'.html($site_config['k_youtube']).'" title="Youtube" target="_blank"><i class="fab fa-youtube-square" aria-hidden="true"></i></a>
                     </div>';
            }
            if($site_config['k_instagram'] != "" )
            {
                echo '<div class="footer_social_divs float-left">
                        <a href="'.html($site_config['k_instagram']).'" title="Instagram" target="_blank"><i class="fab fa-instagram" aria-hidden="true"></i></a>
                     </div>';
            }
            ?>
        </div>
        <div class="clearfix"></div>
    </div>

На больших экранах дисплей в порядке, но на мобильных устройствах div имеет форму внутри него. , он идет не так, как вы можете видеть на загруженном изображении, а также неправильно указана группа ввода.

Ссылка на мой демонстрационный сайт:

Photo

На мобильных устройствах я хочу, чтобы эти 3 элемента делились друг под другом. Для этого я попробовал col-sm-12, col12, но ничего, это все та же проблема.

...