嵌套列/行

我在布局中遇到了嵌套列的难题。在下面的代码片段中，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/

来源

2015-06-20 hufflapuff

** hufflapuff **，要添加到Sotiris的帮助，看看这个[** Fiddle **]（https://jsfiddle.net/knn1bxb8/1/）你的div中包含“一次性事物”仍然陷入div图像并挂在右侧。现在它与左侧对齐。我重新修改了这个区域中的行并添加了几列。希望这也有帮助。 – AngularJR

你指的是文字 “Expandskskjsfs”？如果是，它会溢出容器，因为默认情况下没有空格，所以即使溢出容器，它也会在一行中显示文本。

你可以在你的CSS使用：

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

将打破这个词时，案文达成其容器的结束。

来源

2015-06-20 22:39:25 Sotiris

有趣的解决方案，效果很好。谢谢！ – hufflapuff

回答

相关问题