様々なスタイルをテストするためのブートストラップグリッドシステム

その他 2019-10-01 07:07:28 訪問数: null

まず、同じ行のグリッド12が入力しています

最初のコードのdivの前には次のように変更します。

<DIV CLASS = "コンテナ"> 
    <DIV CLASS = "行"> <！ -定义行行- > 
       <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIVクラス= "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1" > COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ DIV> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL -MD-1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1" >COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ DIV >
     </ div> 
</ div>
ブラウザを出力してもよい以下の結果
画像

第二に、2つの出力の合計は、4つの部分を表す第1の列は、8部は、第二のカラムを占めます
コードは以下の通りであります：
<DIV CLASS = "コンテナ"> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL -MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD -1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1" > COL-MD- 1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ DIV> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
    </ div> 
    < divクラス= "行">
        <DIV CLASS = "COL-MD-4"> COL-MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-8"> COL-MD-8 </ div>
     </ div> 
</ div>

次のようにブラウザの出力結果は、
画像

複数の部品が一部を処理する方法を示す第3の、テストライン12
コード：
<DIV CLASS = "コンテナ"> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL -MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD -1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1" > COL-MD- 1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ DIV> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS =」 COL-MD-1" > COL-MD-1 </ div> <！ -这是第13份- >
     </ div>
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-4"> COL-MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-8"> COL-MD-8 </ div> 
    </ div> 
</ div>
結果：ダウン余分なセッションの秋
画像

第四に、そうでない場合は、4つの部品このような第1行と第2列4部
コード
<DIV CLASS = "コンテナ"> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL -MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD -1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1" > COL-MD- 1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ DIV> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS =」 COL-MD-1" > COL-MD-1 </ div> <！ -这是第13份- > 
    </ div>
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-4"> COL-MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-8"> COL-MD-8 </ div>
     </ DIV> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-4"> COL-MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-4"> COL-MD-4 </ DIV>
     </ DIV> 
</ DIV>
その結果、バック未満の部分は空になります
画像

第五に、場合にされていない場合、どのようなバックプッシュ最初の列として、移動するように、第二行は押し戻さ部3
コード
<DIV CLASS = "コンテナ"> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL -MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD -1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1" > COL-MD- 1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ DIV> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS =」 COL-MD-1" > COL-MD-1 </ div> <！ -这是第13份- > 
    </ div>
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-4"> COL-MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-8"> COL-MD-8 </ div> 
    </ DIV> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-4 COL-MD-オフセット-1"> COL-MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-4 COL-MD-オフセット-3" > COL-MD-4 </ div>
     </ div> 
</ div>

結果：より多くのプッシュダウン落ちる場合
画像

6. 2を交換する方法の最初の列4部、第二の列の6部、
（1）2つのコードが交換されるが、これは良くありません
（2）を達成する事を追加
コード
<DIV CLASS = "コンテナ"> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL -MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD -1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1" > COL-MD- 1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ DIV> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS =」 COL-MD-1" > COL-MD-1 </ div> <！ -这是第13份- > 
    </ div>
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-4"> COL-MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-8"> COL-MD-8 </ div> 
    </ DIV> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-4 COL-MD-オフセット-1"> COL-MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-4 COL-MD-オフセット-3 "> COL-MD-4 </ div> 
    </ div> 
    <DIV CLASS ="行"> 
        <DIV CLASS =" COL-MD-4 COL-MD-プッシュ-6" > COL -MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-6 COL-MD-プル4"> COL-MD-6 </ div>
     </ div> 
</ div>

結果
画像

以下の最初の列のネストされた二つの部分9、各列の6部が発生した場合、今、このような第一、第二の柱部3として七つ、9部、
コード：
<DIV CLASS = "コンテナ"> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL -MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD -1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1 "> COL-MD-1 </ div> 
        <DIV CLASS =" COL-MD-1" > COL-MD- 1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ DIV> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS = "COL-MD-1"> COL-MD-1 </ div> 
        <DIV CLASS =」 COL-MD-1" > COL-MD-1 </ div> <！ -这是第13份- > 
    </ div>
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-4"> COL-MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-8"> COL-MD-8 </ div> 
    </ DIV> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-MD-4 COL-MD-オフセット-1"> COL-MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-4 COL-MD-オフセット-3 "> COL-MD-4 </ div> 
    </ div> 
    <DIV CLASS ="行"> 
        <DIV CLASS =" COL-MD-4 COL-MD-プッシュ-6" > COL -MD-4 </ DIV> 
        <DIV CLASS = "COL-MD-6 COL-MD-プル4"> COL-MD-6 </ div> 
    </ div> 
   <DIV CLASS = "行"> 
        <DIVクラス= "COL-MD-9">COL-MD-9 
            <DIV CLASS = "行"> 
                <DIV CLASS = "COL-MD-6"> COL-MD-6 </ DIV> 
                <DIV CLASS = "COL-MD-6"> COL-MD- 6 </ div> 
            </ div>
        </ DIV> 
        <DIV CLASS = "COL-MD-3"> COL-MD-4 </ div> 
    </ div>
 </ div>
結果
画像
異なるデバイス上の8つの設定
コード
<div class="row">
    <div class="col-sm-12 col-md-8">col-sm-12 col-md-8</div>
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
</div>
<div class="row">
    <div class="col-sm-6 col-md-6">col-sm-6 col-md-6</div>
    <div class="col-sm-6 col-md-6">col-sm-6 col-md-6</div>
</div>

1、大屏上的结果为（1200px以上）
画像
2、小屏上的结果为（768px-992px）
画像
3、超小屏上的结果（768px以下）
画像

九、被卡主的情况

代码：
<div class="container">
    <div class="row">
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3这个地方我给他多加点内容来进行测试</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    </div>
</div>
结果
小屏以上

画像
超小屏
画像

小屏情况下，第一列的内容太多了，后面的三列就下不去，卡住了
如何解决？
<DIV CLASS = "コンテナ"> 
    <DIV CLASS = "行"> 
         <DIV CLASS = "COL-XS-6 COL-SM-3"> COL-XS-6 COL-SM-3这个地方我给他多加点内容来进行测试</ DIV> 
         <DIV CLASS = "COL-XS-6 COL-SM-3"> COL-XS-6 COL-SM-3 </ DIV> 
         <DIV CLASS = "clearfix可視XS"> </ DIV>
          <DIV CLASS = "COL-XS-6 COL-SM-3"> COL-XS-6 COL-SM-3 </ DIV> 
         <DIV CLASS = "COL-XS-6 COL-SM-3 「> COL-XS-6 COL-SM-3 </ div> 
    </ div> 
</ div>

画像

おすすめ

転載: www.cnblogs.com/pere/p/11614239.html
おすすめ
Open Source Daily | Chrome に組み込まれている Gemini の重要性は、中国の AI 追求に関する 5 つの大きな誤解ではありません。ECharts の創設者は魚を育てるために「海に行った」が、何もありません。驚き
中国のAIチームが「米国のために準備を進めている」という噂にマイクロソフトが反応
ランキング
配列内の重複要素を検索し、繰り返し回数の最小値から最大値までの順に並べ替えます es6
【C++学習記】Ten、C++デザインパターン - 抽象ファクトリーパターン
知人：素人の言語ランタイム（A）に
ist „collision.relativeVelocity.magnitude“ in Unity
Linuxダイナミックリンク（3）のPLTとGOTについて話す-パブリックGOTエントリ
leetcode。図L.207カリキュラム-Java
羅区[] P3518 [POI2011] SEJ、金庫
MySQL にクエリを実行するときに使用するインデックスを指定します
現在のユーザー環境変数とシステムのWin10ベースのビュー
十二の仕事 - あなたの誕生日
アーカイブ
もっと
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)

コードワールド

© 2018 codetd.com