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/