我页面中的响应式设计答案

【问题标题】：Responsive design in my page我页面中的响应式设计
【发布时间】：2016-11-03 02:17:57
【问题描述】：

我使用 bootstrap 创建了一个随机报价页面，但我的页面内容变为当我减小窗口大小时，从容器流体中取出。我该如何改变呢？

这是我的页面： http://codepen.io/Juan1417/pen/wowevJ

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Anton|Dancing+Script" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<div class="container-fluid text-center">

    <div class="row">   
      <div class="col-md-8">    
        <h1 id="title1">Random quote generator.</h1>
    </div>

  </div>    
  <div class="row"> 
        <div class="col-md-8">
    <blockquote>
        <p id="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."</p>
        <footer id="author">Author</footer>
        </blockquote>       
           </div>
      <div class="col-md-8">
        <i class="fa fa-quote-right fa-3x" aria-hidden="true"></i>
        </div>  

    <div class="row">
        <button id="button1"class="btn btn-default" type="submit">New Quote</button>
        <button id="tweetButton"class="btn btn-default" type="submit">Tweet Quote</button>

    </div>


    </div>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

在您的 css 中，尝试使用媒体查询 (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) 来确定您是否需要切换到更小的字体、按钮大小、图像比例、溢出菜单，或者甚至只是为了小尺寸而完全消除元素。

【讨论】：