Question

我在一行中有标签，而在另一端有我的按钮...我将它们包裹在col-md-6 div上，因此如果溢出该标签，我希望它转到下一行< / p>

这是我的代码：

<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;
}

将标签推送到下一行而不是溢出

1 个答案: