Bootstrap 4-自动换行而不更改高度 [英] Bootstrap 4 - word wrap text without change the height
本文介绍了Bootstrap 4-自动换行而不更改高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
来自:
带有该问题的答案(到处都是重复的,但到处都是相同的答案)
.btn {空白:正常!重要;自动换行:断词;}
但预期结果是"Cambio de Nacionalidad"已对齐.
解决方案
由于使用的是BS 4,默认情况下 col-*
是flex项目,因此只需使用 height:100%
在按钮上
.btn {高度:100%;}
< link href ="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"rel ="stylesheet"完整性="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin ="anonymous">< div class ="container">< div class ="row">< div class ="col-sm">< button id ="1" type ="button" class ="btn Spectrum btn-secondary btn-block cbb"> Opciones Generales</button></div>< div class ="col-sm">< button id ="2" type ="button" class ="btn Spectrum btn-secondary btn-block cbb"> 1</button></div>< div class ="col-sm">< button id ="4" type ="button" class ="btn Spectrum btn-secondary btn-block cbb"> 2</button></div>< div class ="col-sm">< button id ="5" type ="button" class ="btn Spectrum btn-secondary btn-block cbb"> 3</button></div>< div class ="col-sm">< button id ="6" type ="button" class ="btn Spectrum btn-secondary btn-block cbb"> Cambio de Nacionalidad</button></div></div>< br/>< div class ="row">< div class ="col-sm">< button id ="7" type ="button" class ="btn Spectrum btn-secondary btn-block cbb"> 4</button></div>< div class ="col-sm">< button id ="9" type ="button" class ="btn Spectrum btn-secondary btn-block cbb"> 5</button></div>< div class ="col-sm">< button id ="11" type ="button" class ="btn Spectrum btn-secondary btn-block cbb"> 6</button></div>< div class ="col-sm">< button id ="12" type ="button" class ="btn Spectrum btn-secondary btn-block cbb"> 7</button></div>< div class ="col-sm">< button id ="10" type ="button" class ="btn Spectrum btn-danger btn-block cbb"> Crear Item</button></div></div></div>
Coming from: Twitter Bootstrap Button Text Word Wrap
How can I set the word wrap of a text inside a button in bootstrap 4, without change the height or with all buttons with the same height? For example:
<div class="container">
<div class="row">
<div class="col-sm">
<button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button>
</div>
<div class="col-sm">
<button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button>
</div>
<div class="col-sm">
<button id="4" type="button" class="btn spectral btn-secondary btn-block cbb">2</button>
</div>
<div class="col-sm">
<button id="5" type="button" class="btn spectral btn-secondary btn-block cbb ">3</button>
</div>
<div class="col-sm">
<button id="6" type="button" class="btn spectral btn-secondary btn-block cbb">Cambio de Nacionalidad</button>
</div>
</div><br />
<div class="row">
<div class="col-sm">
<button id="7" type="button" class="btn spectral btn-secondary btn-block cbb">4</button>
</div>
<div class="col-sm">
<button id="9" type="button" class="btn spectral btn-secondary btn-block cbb ">5</button>
</div>
<div class="col-sm">
<button id="11" type="button" class="btn spectral btn-secondary btn-block cbb">6</button>
</div>
<div class="col-sm">
<button id="12" type="button" class="btn spectral btn-secondary btn-block cbb">7</button>
</div>
<div class="col-sm">
<button id="10" type="button" class="btn spectral btn-danger btn-block cbb">Crear Item</button>
</div>
</div>
</div>
returns this:
with the answer from that question (that is duplicated everywhere but the answer is the same everywhere)
.btn{
white-space:normal !important;
word-wrap: break-word;
}
but the expected result is that "Cambio de Nacionalidad" being aligned.
解决方案
Since you are using BS 4 the col-*
are flex items stretched by default so simply use height:100%
on the button
.btn {
height:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm">
<button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button>
</div>
<div class="col-sm">
<button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button>
</div>
<div class="col-sm">
<button id="4" type="button" class="btn spectral btn-secondary btn-block cbb">2</button>
</div>
<div class="col-sm">
<button id="5" type="button" class="btn spectral btn-secondary btn-block cbb ">3</button>
</div>
<div class="col-sm">
<button id="6" type="button" class="btn spectral btn-secondary btn-block cbb">Cambio de Nacionalidad</button>
</div>
</div><br />
<div class="row">
<div class="col-sm">
<button id="7" type="button" class="btn spectral btn-secondary btn-block cbb">4</button>
</div>
<div class="col-sm">
<button id="9" type="button" class="btn spectral btn-secondary btn-block cbb ">5</button>
</div>
<div class="col-sm">
<button id="11" type="button" class="btn spectral btn-secondary btn-block cbb">6</button>
</div>
<div class="col-sm">
<button id="12" type="button" class="btn spectral btn-secondary btn-block cbb">7</button>
</div>
<div class="col-sm">
<button id="10" type="button" class="btn spectral btn-danger btn-block cbb">Crear Item</button>
</div>
</div>
</div>
这篇关于Bootstrap 4-自动换行而不更改高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文