嵌套列/行

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小提琴：http://jsfiddle.net/xbwstdv7/1/

Answer 1

你指的是文字 「Expandskskjsfs」？如果是，它會溢出容器，因爲默認情況下沒有空格，所以即使溢出容器，它也會在一行中顯示文本。

你可以在你的CSS使用：

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

將打破這個詞時，案文達成其容器的結束。