Bootstrap网格堆栈位置？

Question

当涉及到桌面视图中的引导网格中的位置时，我遇到了问题。我想要实现的目标：

我遇到的问题是我使用的间距看起来并不好：<div class="col-xs-6 col-md-4">在移动视图中它没有响应而且不能保持原样。 正如您在移动视图中看到的那样，它不会像桌面模式那样保持不变。

移动视图：

桌面视图：

代码：

＆＃13;

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<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">

  <div class="row">
  <div class="col-xs-6 col-md-4">
    <p>umgås på riktigt.</p>
    <hr>
    <p>sedan 2015</p>
  </div>
  <div class="col-xs-6 col-md-4">
<h1>Brädspelskafeet</h1>
  </div>
  <div class="col-xs-6 col-md-4">
    <a href="<?php echo $login; ?>"><?php echo $text_login; ?></a>
    <a href="<?php echo $register; ?>"><?php echo $text_register; ?></a>
    <a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <span class=""><?php echo $text_shopping_cart; ?></span></a>
<hr>
  <?php echo $search; ?>
  </div>
</div>
</div>

<div id="search" class="input-group col-md-5">
  <input type="text" name="search" value="<?php echo $search; ?>" placeholder="<?php echo $text_search; ?>" class="form-control" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default"><i class="fa fa-search"></i></button>
  </span>
</div>

＆＃13;

＆＃13;

＆＃13;

网站：http://www.bradspelskafeet.se/index.php

Answer 1

以下给出的解决方案可能对您有帮助。我已将col-xs-6更改为col-xs-4，并将类col-xs-4添加到div id = search http://jsfiddle.net/XELRX/142/