ブートストラップ4グリッド - 列の子供が幅を尊重しない

Question

私は、ブートストラップ4のグリッド列の子が列の幅を超えることがあることに気付きました。これはBootstrap 4のバグですか、それともその子の最大幅を明示的に設定する必要がありますか？

body { 
 
    padding: 12px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <button class="btn btn-outline-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolore vitae fuga debitis recusandae eius nam, neque reprehenderit perferendis corrupti, autem quo nemo consequuntur delectus deleniti quisquam repellat quidem vel!</button> 
 
    </div> 
 
    <div class="col-xs-4">hello</div> 
 
    <div class="col-xs-4">oasfhsaolf</div> 
 
    </div> 
 
</div>

Answer 1

実は、col-xs-4子供たちはうまく動作している - それはあなたが要素を検査し、それらの列の子どもたちが正しい幅であることを見て、これを見ることができます:)反乱だボタンです。

このボタンの動作は、ブートストラップの.btnクラスがwhite-space: nowrapで、ボタンに囲まれたテキストをラップしないように指示するためです。にしてみ

body { 
 
    padding: 12px; 
 
} 
 
.btn.btn-outline-primary { 
 
    white-space: inherit; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <button class="btn btn-outline-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolore vitae fuga debitis recusandae eius nam, neque reprehenderit perferendis corrupti, autem quo nemo consequuntur delectus deleniti quisquam repellat quidem vel!</button> 
 
    </div> 
 
    <div class="col-xs-4">hello</div> 
 
    <div class="col-xs-4">oasfhsaolf</div> 
 
    </div> 
 
</div>

Answer 2

：

ボタンを表示したいかに応じて、ボタンのブートストラップスタイリングを上書きするカスタムwhite-space CSSプロパティ（inheritなど）を追加することができますボタンとブートストラップグリッドを削除するルールに従う

これを見るhttp://jsbin.com/naruqutaqo/edit?html,output