Question

来自：Twitter Bootstrap Button Text Word Wrap

如何在引导程序4的按钮内设置文本的自动换行而不更改高度或将所有按钮都设置为相同的高度？例如：

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

返回以下内容：

带有该问题的答案（到处都是重复的，但到处都是相同的答案）

.btn{
    white-space:normal !important;
    word-wrap: break-word; 
}

但预期结果是“ Cambio de Nacionalidad”已对齐。

Answer 1

由于您使用的是BS 4，因此col-*是弹性项目，默认情况下会拉伸，因此只需在按钮上使用height:100%

.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-自动换行而不更改高度

1 个答案: