Question

我使用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>

Answer 1

在你的css中，尝试使用媒体查询（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）来确定是否需要切换到较小的字体，按钮大小，图像比例，溢出菜单，甚至只是为了微小的外形而完全删除元素。 / p>

我页面中的响应式设计

1 个答案: