ui-bootstrapの列がAngularJSで中断する

Question

私はAngularJSを初めて使っています。私はデフォルトでui-bootstrapを初めて使うと思います。しかし、私は公式のバニラのブートストラップには見知らぬ人ではないので、なぜ私のコラムが整列していないのかちょっと混乱しています。何らかの理由で、 "pull-left"または "pull-right"クラスを追加しない限り、基本的にはカラムのサイズは行のように振る舞いますが、デフォルトではブレークダウンします。なぜこのような振る舞いをしているのかわかりません。他のサンプルコードでもこの形式の列に問題がないことがわかりました。私はui-bootstrapに関連するすべての文書を読んだことがありますが、Bootstrapグリッドに関する記述はありません。右、これは動作するはずです... https://embed.plnkr.co/txDqsQHqLrmhrpS0Wyl9/ （私はメニューはここで働いていません注意してくださいよ、それがこのプロジェクトのローカルバージョンに固定されています。）

そして：

ここPlunkerですか？

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: pink;">First Col 
    </div> 
    <div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: cyan;">Second Col 
    </div> 
    <div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: lightgreen;">Third Col 
    </div> 
</div> 

または私は何かが足りないのですか？

Answer 1

最初に： col-4-smが間違っています。 col-sm-4である必要があります。列の幅が最後になります。

第2： 角度のある素材を使用している場合は、コンテンツの位置を制御するためにレイアウトディレクティブを使用することをおすすめします。参照してください - https://material.angularjs.org/latest/layout/container

希望に役立ちます。 :)