嵌套列/行

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

你的意思是文字＆＃34; Expandskskjsfs＆＃34;？如果是，它会溢出容器，因为没有空间，所以默认情况下它会在一行中显示文本，即使它溢出容器。

你可以在你的css中使用：

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

当文本到达容器的末尾时会破坏单词。