Вложенные столбцы/строки

Question

У меня сложное время с вложенными столбцами в моем макете. В следующем фрагменте кода col-md-3 плавает над двумя другими сетками, используя отрицательный запас. Все выглядит отлично, за исключением тех случаев, когда я пытаюсь добавить текст в один из вложенных столбцов, а затем он расширяется из строки. Любая идея, что может быть причиной этого? У меня такое чувство, что я сделал ряд ошибок с моим кодом, и я был бы признателен за некоторые предложения о том, как решить эту проблему.

div { 
    background-color: grey; 
} 
.schedule-box-header { 
    font-size: 32px; 
    color: #1cbbb4; 
    text-transform: uppercase; 
} 
.schedule-box-sub-header { 
    font-size: 20px; 
    color: #747474; 
    text-transform: uppercase; 
} 
.schedule-box-top { 
    background-color: #1cbbb4; 
    height: 5px; 
    margin-bottom: 10px; 
} 
.schedule-box-bottom { 
    background-color: #1cbbb4; 
} 
.schedule-box-bottom h3 { 
    text-align: center; 
    padding: 10px; 
    color: #ffffff; 
} 

<div class="container content-wrap drop-shadow"> 
    <div class="row row-buffer"> 
     <div class="col-md-3"> 
      <img class="img-responsive center-block" src="http://placehold.it/350x150"> 
     </div> 
     <div class="col-md-5 company-name"> 
       <h1>WINE REVIEWS</h1> 

       <h2>HOME OF THE REVIEWS</h2> 

     </div> 
     <div class="col-md-3 schedule-box drop-shadow"> 
      <div class="row"> 
       <div class="col-md-12 schedule-box-top"></div> 
      </div> 
      <div class="row"> 
       <div class="col-md-4"> 
        <img class="img-responsive" src="http://placehold.it/350x150"> 
       </div> 
       <div class="col-sm-8"> 
         <h1 class="schedule-box-header">Expandskskjsfs 
         <h2 class="schedule-box-sub-header">one time thing</h2> 
        </div> 
       </div> 
       <div class="row row-buffer-small"> 
        <div class="col-md-12 forms"> 
         <div class="form-group"> 
          <input type="email" class="form-control input-date" placeholder="Pick a Date"> 
         </div> 
         <div class="form-group"> 
          <input type="email" class="form-control input-time" id="email" placeholder="Pick a Time"> 
         </div> 
         <div class="form-group"> 
          <input type="email" class="form-control input-group" placeholder="Group Size"> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12 schedule-box-bottom"> 
         <h3>Schedule</h3> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-1"></div> 
     </div> 

JS Fiddle: http://jsfiddle.net/xbwstdv7/1/

Answer 1

вы имеете в виду текст "Expandskskjsfs"? Если да, то он переполняет контейнер, потому что нет места, поэтому по умолчанию он отображает текст в одной строке, даже если он переполняет контейнер.

Вы можете использовать в вашем CSS:

.schedule-box-header { 
    word-break: break-all; 
} 

, что нарушит слово, когда текст достигнет конца своего контейнера.