代码之家  ›  专栏  ›  技术社区  ›  Leandro Bardelli

引导4-不更改高度的自动换行文字

  •  0
  • Leandro Bardelli  · 技术社区  · 6 年前

    来自: 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>
    

    返回: enter image description here

    从那个问题得到的答案(在任何地方都是重复的,但答案在任何地方都是一样的)

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

    但预期的结果是,“南洋学大本营”正在结盟。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Temani Afif    6 年前

    既然你使用的是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>