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包括自動寬度，最大寬度和固定寬度。

謝謝你的時間！

來源

2014-12-07 user3385205

它與Bootstrap無關。默認情況下，瀏覽器不會將單詞分爲兩部分，而不再適合一行。爲了能夠正確地進行連詞，他們需要掌握關於語言的知識以及如何將單詞分解成音節。瀏覽器支持還沒有，但

hyphens: auto;

應該在未來做到這一點。如果你不在乎分詞在哪裏簡單地添加

word-break: break-all;

到overview類。如果你根本不希望顯示溢出這個詞的部分添加

overflow: hidden;

到overview類。

來源

2014-12-07 12:58:55 ckuijjer

好了感謝。如果這是一張圖片，那我該怎麼辦？圖像不會調整大小。我能做什麼？ – 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

代表文本內的，瀏覽器可以選擇斷行

來源

2014-12-07 14:45:38 321zeno

Bootstrap響應式問題

回答

相關問題