如何在引导程序 3 中将 div 放在移动设备上？

Question

我给 .fejlec div 这个 css 代码：

@media only screen and (max-width: 768px) {
  .fejlec
  {
    text-align: center;
  }
}

但它并没有在移动设备上对齐我的 div 中心。我想将这些 div 居中对齐： - .fejlec_logo - .fejlec_kereses - .fejlec_kedvencek - .fejlec_kosar

在上传的照片上，您可以看到它现在的样子。

https://imgur.com/a/vh7AGY4

<div class="container fejlec">
        <div class="row">
            <div class="col-md-3 col-xs-12 fejlec_logo">
                <a title="<?php echo html($site_config['logo_text']); ?>" class="navbar-brand logo clearfix" href="<?php echo $host; ?>">
                    <span class="logo_text_1"><?php echo html($site_config['logo_text']); ?></span><span class="logo_text_2"><?php echo html($site_config['logo_slogen']); ?></span>
                </a>
            </div>
            <div class="col-md-5 col-xs-12 fejlec_kereses">
                <form role="search" name="header_search_form" id="header_search_form" method="post" onsubmit="search_k();return false;">
                    <div class="input-group stylish-input-group bc-wrapper">
                        <input type="text" class="form-control header_search_input" autocomplete="off" placeholder="Termékek keresése..." name="country_id" id="country_id" onkeyup="autocomplet();" >
                        <span class="input-group-addon">
                            <i class="fa fa-spinner fa-spin" id="search_progress"></i>
                            <input type="hidden" name="search_date" id="search_date" value="" />
                            <button type="submit" class="header_search_button"><i class="fa fa-search header_search_icon" aria-hidden="true"></i></button>
                        </span>
                    </div>
                    <div class="bc-menu list-group" id="country_list_id"></div>
                </form>
            </div>
            <div class="col-md-2 col-xs-12 fejlec_kedvencek">
                <a href="<?php echo $host; ?>/kedvenc-termekeim" class="fav_items_header_link" title="Kedvenc termékeim"><i class="fa fa-heart" aria-hidden="true"></i> Kedvenc termékeim</a>
            </div>
            <div class="col-md-2 col-xs-12 fejlec_kosar">
                <a href="<?php echo $host; ?>/ajanlatkeres" title="Kosár">
                    <span class="header_kosar_text"><i class="fa fa-shopping-basket fejlec_kosar_ikon" aria-hidden="true"></i> Ajánlatkérés</span>
                    <span id="header_kosar_text"></span>
                    <div class="clearfix"></div>
                </a>
            </div>
        </div>
    </div>

Answer 1

只需使用引导类

文本中心

此外

您在容器本身中使用了文本中心对齐方式，因此它不会以这种方式工作，

您必须在 col div 中提供 fejlec 类，如下所示

 <div class="col-md-5 col-xs-12 fejlec_kereses fejlec">
                <form role="search" name="header_search_form" id="header_search_form" method="post" onsubmit="search_k();return false;">
                    <div class="input-group stylish-input-group bc-wrapper">
                        <input type="text" class="form-control header_search_input" autocomplete="off" placeholder="Termékek keresése..." name="country_id" id="country_id" onkeyup="autocomplet();" >
                        <span class="input-group-addon">
                            <i class="fa fa-spinner fa-spin" id="search_progress"></i>
                            <input type="hidden" name="search_date" id="search_date" value="" />
                            <button type="submit" class="header_search_button"><i class="fa fa-search header_search_icon" aria-hidden="true"></i></button>
                        </span>
                    </div>
                    <div class="bc-menu list-group" id="country_list_id"></div>
                </form>
            </div>

Answer 2

试试老式的margin: 0 auto;:

.fejlec
  {
    float: none;
    margin: 0 auto;
  }