引导网格堆栈位置？答案

【问题标题】：Bootstrap grid stack position?引导网格堆栈位置？
【发布时间】：2017-05-16 04:12:25
【问题描述】：

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

我遇到的问题是我使用的间距看起来不太好：<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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：