Bootstrap отзывчивые проблемы

Question

Итак, я работал над небольшим проектом и заметил, что мне нужно делать больше медиа-запросов, чем хотелось бы?

С моей точки зрения, бутстрап должен заботиться о моей отзывчивости, поэтому я уверен, что сделал что-то неправильно. Описывая проблему в словах трудно, так что вы посмотрите на это изображение может:

Вот как это выглядит, размер рабочего стола: 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">mail@mail.com</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>

Что я делаю не так? Скажите, пожалуйста, если мне нужно показать больше кода, я уверен, что я делаю что-то неправильно.

Или мне просто нужно продолжать делать медиа-запросы?

Примечание: Я попытался присвоить ширину обзору класса, никакого результата. Он включает в себя автоматическую ширину, максимальную ширину и фиксированную ширину.

Спасибо за ваше время!

Answer 1

Это не имеет отношения к Bootstrap. По умолчанию браузеры не разрывают слова на две части, когда они больше не вписываются в строку. Чтобы иметь возможность правильно переносить перенос, им нужно будет знать знание языка и как разбить слова на слоги. Браузерной поддержки еще нет, но

hyphens: auto; 

должен сделать это в будущем. Если вы не заботитесь, где слово делится просто добавить

word-break: break-all; 

к overview класса. И если вы просто не хотите, чтобы показать ту часть слова, которое перетекает добавить

overflow: hidden; 

к overview класса.

Answer 2

Вы также можете посмотреть в wbr тег: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

представляет позицию в тексте, где браузер может дополнительно разбить линию