Bootstrap响应式问题

问题描述：

所以我一直在做一个小项目，并且发现我必须做比我想要的更多的媒体查询？Bootstrap响应式问题

从我的理解，bootstrap应该照顾我的反应，所以我敢肯定我做错了什么。描述词的问题是很难的，所以你可以看看这个图片：

下面是它的外观，桌面大小： http://gyazo.com/be1c1d6f7af31adf6cf2c21fe1697f67

下面是它的外观，当缩小到手机： http://gyazo.com/27bb7da880fd7a789e8b57c88e0b9759

正如你所看到的，内容移动OUT的白框的，并且不会再往下一行，我想它应该默认做，或者我是否高估Bootstrap？

下面是一些使盒子的代码：

.overview { 
 
    height: 500px; 
 
    background: white; 
 
    margin-top: 40px; 
 
    box-shadow: 5px 5px 5px #f2f2f2; 
 
    border-left: 2px #f2f2f2 solid; 
 
    border-top: 2px #f2f2f2 solid; 
 
    border-radius: 7px; 
 
    }

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'> 
 

 

 
<div id="page-content-wrapper"> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 velkommen"> 
 
     <i class="glyphicon glyphicon-cog topglyph"></i> 
 
     <h1>Kontrolpanel</h1> 
 
     <br> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-4 brugeroplysninger"> 
 
     <h1><span class="glyphicon glyphicon-user orange"></span> Oplysninger</h1> 
 
     <div class="brugeroplysninger-divider"></div> 
 
     <ul> 
 
      <li><span class="glyphicon glyphicon-envelope orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">[email protected]</span><a href="#" data-toggle="modal" data-target="#emailmodal" class="brugeroplysninger-right">Skift</a> 
 
      </li> 
 
      <li><span class="glyphicon glyphicon-tag orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current"> Alexander</span><a href="#" data-toggle="modal" data-target="#fornavnmodal" class="brugeroplysninger-right">Skift</a> 
 
      </li> 
 
      <li><span class="glyphicon glyphicon-tags orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current"> Alexander</span><a href="#" data-toggle="modal" data-target="#efternavnmodal" class="brugeroplysninger-right">Skift</a> 
 
      </li> 
 
      <li><span class="glyphicon glyphicon-asterisk orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">******</span><a href="#" data-toggle="modal" data-target="#adgangskodemodal" class="brugeroplysninger-right">Skift</a> 
 
      </li> 
 
      <li><span class="glyphicon glyphicon-picture orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">Billede</span><a href="#" data-toggle="modal" data-target="#billedemodal" class="brugeroplysninger-right">Skift</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
     <div class="overview"> 
 
      fdsfsdfdsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

我到底做错了什么？请告诉我，如果我需要显示更多的代码，我敢肯定我做错了什么。

或者我只是不得不继续做媒体查询？

注意： 我试着给类概览分配一个宽度，没有结果。 THat包括自动宽度，最大宽度和固定宽度。

谢谢你的时间！

答

它与Bootstrap无关。默认情况下，浏览器不会将单词分为两部分，而不再适合一行。为了能够正确地进行连词，他们需要掌握关于语言的知识以及如何将单词分解成音节。浏览器支持还没有，但

hyphens: auto;

应该在未来做到这一点。如果你不在乎分词在哪里简单地添加

word-break: break-all;

到overview类。如果你根本不希望显示溢出这个词的部分添加

overflow: hidden;

到overview类。

好了感谢。如果这是一张图片，那我该怎么办？图像不会调整大小。我能做什么？ – user3385205 2014-12-07 14:18:17

查看“img-responsive”类，请参阅http：// getbootstrap。COM/CSS /＃图像。添加应该使图像调整到父元素的大小（最有可能像'col-xs-6'） – ckuijjer 2014-12-07 14:21:45

再次感谢，我会看看它.. :) – user3385205 2014-12-07 14:54:22

答

您也可以考虑在wbr标签：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

代表文本内的，浏览器可以选择断行

Bootstrap响应式问题

相关推荐