Bootstrap电网堆叠位置？

Question

我有一个问题，当涉及到与桌面视图一起在引导网格中的位置。我想实现：

我的问题是，间距不看我使用的好：<div class="col-xs-6 col-md-4">当移动视图它不是敏感和不留，因为它应该。 正如您在移动视图中看到的那样，它不会像桌面模式下一样。

移动视图：

桌面视图：

代码：

<!-- 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>

网站：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/