Question

如果用户在移动设备上查看该网站，我如何将这两个.col-md-3和.col-md-6 div作为块元素，以获得另一个？

是否有针对此的jQuery解决方案？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 fejlec_logo">
      <a title="<?php echo $siteName; ?>" class="navbar-brand logo clearfix" href="<?php echo $host; ?>">
        Site logo
      </a>
    </div>
    <div class="col-md-6 fejlec_kereses">
      <form role="search" name="header_search_form" id="header_search_form" method="post">
        <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="search_input" id="country_id" onkeyup="autocomplet();">
          <span class="input-group-addon">
                                <button name="search_submit" 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>
</div>

Answer 1

您可以将col-xs-12与col-md-6一起使用，xs表示只有当文档窗口到达小型设备时，此类才会起作用。

<div class="row">
        <div class="col-md-3 col-xs-12 fejlec_logo">
            <a title="<?php echo $siteName; ?>" class="navbar-brand logo clearfix" href="<?php echo $host; ?>"><?php echo $siteName; ?></a>
        </div>
        <div class="col-md-6 col-xs-12 fejlec_kereses">
            <form role="search" name="header_search_form" id="header_search_form" method="post">
                <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="search_input" id="country_id" onkeyup="autocomplet();" >
                    <span class="input-group-addon">
                        <button name="search_submit" 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>

Answer 2

将类col-xs-12添加到其代码中（添加，而不是替换 - 这样它将保持原样在大中型屏幕上）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-md-3 fejlec_logo">
      <a title="<?php echo $siteName; ?>" class="navbar-brand logo clearfix" href="<?php echo $host; ?>">
        Site logo
      </a>
    </div>
    <div class="col-xs-12 col-md-6 fejlec_kereses">
      <form role="search" name="header_search_form" id="header_search_form" method="post">
        <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="search_input" id="country_id" onkeyup="autocomplet();">
          <span class="input-group-addon">
                                <button name="search_submit" 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>
</div>

仅在移动设备上将div设为块元素

2 个答案: