將標簽推送到下一行而不是溢出

Question

我在行的另一端有我的按鈕在一行中有標簽...我把它們包裹在col-md-6 div中所以如果它溢出那么我希望它轉到下一行

這是我的代碼：

<div class="row">
<div class="col-md-6 col-xs-12 overflow-hidden">
    <div class="pull-left">
        <div class="d-flex align-center">
            <b class="inline-block m-10">Testing:</b>
            <span class="tags">Test</span>
            <span class="tags">Test</span>
        </div>
    </div>
        <div class="col-md-6 col-xs-12 overflow-hidden">
        <div class="pull-right">
            <button class="button btn-info m-10">
                Test </button><button class="button btn-clear"> Clear</button>
        </div>
    </div>
</div>

CSS：

.button {
    cursor: pointer;
    border: none;
    border-radius: 3px;
    height: 50px;
    width: 120px;
}

.m-10 {
    margin-left: 10px;
    margin-right: 10px;
}

.tags {
    background-color: #f2f2f2;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    transition: all .3s ease-out;
    margin: 3px 5px 3px 0;
    padding: 2px 15px;
    border-radius: 6px;
    border: 1px solid #c9c9c9;
    display: inline-block;
}

.inline-block {
    display: inline-block;
}

.align-center {
    align-items: center;
}

.pull-left {
    float: left;
}

.flex-end {
    justify-content: flex-end;
}

演示

https://jsfiddle.net/gxw715nk/

Answer 1

花車一直被棄用。 它們仍然有效，但更好的方法是使用flexbox：

.d-flex {
  display: flex;
  flex-wrap: wrap;
}