html - Bootstrap 网格堆栈位置？

Question

当涉及到 Bootstrap 网格中的位置以及桌面 View 时，我遇到了一个问题。我想要达到的目标:

我遇到的问题是我使用的间距看起来不太好:<div class="col-xs-6 col-md-4">在移动 View 中时，它没有响应，也没有保持应有的状态。正如您在移动 View 中看到的那样，它不会像在桌面模式中那样停留。

移动 View :

桌面 View :

代码:

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