ブートストラップのヘッダーアイコンと本文のテキストを整列できません

ブートストラップに非常に不満な問題に直面しています。私はいくつかの見出しとテキストを含む見出しと本文を持っています。私は両サイドのヘッダーに2つのアイコンがあり、私の例ではビジネスのようないくつかの見出しを持った話がいくつかあります。私は見出し（ビジネス）を右側のアイコンと揃えておきたい。だから、 "ビジネス"はヘッダーの私の右のアイコンが始まる場所から始まるべきで、私は応答性の機能を維持するためにこれをブートストラップ経由で実現したいと思っています。以下は、私のコードのjsfiddle例です。ブートストラップのヘッダーアイコンと本文のテキストを整列できません

jsfiddle

、ここでは私のコードです：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Bootstrap Example</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">  </script> 
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> 
<style> 
    .grey-rule { 
    padding: 0px; 
    border-bottom: 3px solid #f0f3f7; 
    } 

    .grey-rule hr { 
    display: block; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    border-top: 10px solid #E5E8EC; 
    } 

.story-label { 
    font-weight: bold; 
    font-size: 24px; 
    color: #7F8DA2; 
    padding: 8px 0px 12px 0px; 
    } 

.header { 
    font-weight: bold; 
    font-size: 30px; 
    background-color: #4070CB; 
    color: #EFF0F2; 
    padding: 15px 0; 
    } 

.center { 
    text-align: center; 
    } 

.txt { 
    align-items: center; 
    display: flex; 
    text-align: center; 
    justify-content: center; 
    } 

.color1 { 
    background-color: yellow; 
    } 

    .color2 { 
    background-color: orange; 
    } 

    .rightImg { 
    margin-right: 30px; 
    margin-left: 12px; 
    } 

.leftImg { 
    margin-right: 12px; 
    margin-left: 30px; 
    } 

    .header a { 
    color: white; 
    font-size: larger; 
    } 
    </style> 
    </head> 
    <body> 

<div id="mainContainer" class="container-fluid"> 
    <div data-reactroot=""> 
     <div class="container-fluid col-sm-offset-1"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-10 header"> 
        <div class="row"> 
         <div class="col-xs-2 col-sm-2 col-md-2 col-lg-1 center"> 
          <a href="#"><span class="glyphicon glyphicon-align-justify"></span></a> 
         </div> 
         <div 
          class="col-lg-10 col-md-8 col-sm-8 hidden-xs visible-sm visible-md visible-lg txt">TEST</div> 
         <div 
          class="col-lg-10 col-md-8 col-sm-8 col-xs-8 visible-xs hidden-sm hidden-md hidden-lg txt"></div> 
         <div class="col-xs-2 col-sm-2 col-md-2 col-lg-1 center"> 
          <a href="#"><span class="glyphicon glyphicon-phone"></span></a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-10 col-md-3 col-lg-3 color1"> 
        <div class="row"> 
         <div class="col-xs-12 col-sm-12"> 
          <div class="row"> 
           <div class="col-xs-12 col-sm-12 grey-rule"> 
            <hr> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-xs-12 col-sm-12 story-label"> 
            <div class="row"> 
             <div class="col-xs-2 center">Business</div> 
             <div class="col-lg-10 col-md-8 col-sm-8 col-xs-8 txt"></div> 
             <div 
              class="col-xs-2 col-sm-2 col-md-2 col-xs-8 col-lg-1 center"> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-xs-12 col-sm-10 col-md-4 col-lg-4 color2"> 
        <div class="row"> 
         <div class="col-xs-12 col-sm-12"> 
          <div class="row"> 
           <div class="col-xs-12 col-sm-12 grey-rule"> 
            <hr> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-xs-12 col-sm-12 story-label"> 
            <div class="row"> 
             <div class="col-xs-2 center">Business</div> 
             <div class="col-lg-10 col-md-8 col-sm-8 col-xs-8 txt"></div> 
             <div 
              class="col-xs-2 col-sm-2 col-md-2 col-xs-8 col-lg-1 center"> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-xs-12 col-sm-10 col-md-3 col-lg-3 color1">.col-sm-4</div> 
      </div> 
     </div> 
    </div> 
</div>

いずれかが助けることはできますか？私は正しい方法でそれをやっていますか？

************* UPDATE ******************************** **

だけで応答性のために、私がしたいの使用のmargin-leftないと私は、ヘッダー、アイコンとテキストはあなたが右のブートストラップクラスを使用していないすべての画面サイズ

出典

2016-12-23 Hamed Minaee

に整列することにしたいです。要素ごとに1つの.colクラスを使用します。 Ex。 .col-sm-3スタイルは、768pxで破損し、.col-med-3は992pxなどで中断します。

以下、マークアップの仕組みを説明します。

これは、結果のスクリーンショットです：私はメディアの画面で列のサイズを大きくし、小さな画面でそれを減少したいならば、私は1つ以上を使用するために必要なものが、http://screencast.com/t/yb7UvAaSs

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Bootstrap Example</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style> 
.grey-rule { 
    padding: 0px; 
    border-bottom: 3px solid #f0f3f7; 
} 

.grey-rule hr { 
    display: block; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    border-top: 10px solid #E5E8EC; 
} 

.story-label { 
    font-weight: bold; 
    font-size: 24px; 
    color: #7F8DA2; 
    padding: 8px 0px 12px 0px; 
} 

.header { 
    font-weight: bold; 
    font-size: 30px; 
    background-color: #4070CB; 
    color: #EFF0F2; 
    padding: 15px 0; 
} 

.center { 
    text-align: center; 
} 

.txt { 
    align-items: center; 
    display: flex; 
    text-align: center; 
    justify-content: center; 
} 

.color1 { 
    background-color: yellow; 
} 

.color2 { 
    background-color: orange; 
} 

.rightImg { 
    margin-right: 30px; 
    margin-left: 12px; 
} 

.leftImg { 
    margin-right: 12px; 
    margin-left: 30px; 
} 

.header a { 
    color: white; 
    font-size: larger; 
} 
</style> 
</head> 
<body> 

    <div id="mainContainer" class="container-fluid"> 

     <div data-reactroot=""> 

      <div class="container-fluid col-sm-offset-1"> 

       <div class="row"> 

        <div class="col-sm-10"> 

         <div class="row"> 

          <div class="col-sm-2"> 

           <a href="#"><span class="glyphicon glyphicon-align-justify"></span></a> 

          </div> 

          <div class="col-sm-8 hidden-xs visible-sm visible-md visible-lg txt">TEST</div> 

          <div class="col-sm-2"> 

           <a href="#"><span class="glyphicon glyphicon-phone"></span></a> 

          </div> 

         </div> 

        </div> 

       </div> 

       <div class="row"> 

        <div class="col-sm-10 color1"> 

         <div class="row"> 

          <div class="col-sm-12"> 

           <div class="row"> 

            <div class="col-sm-12 grey-rule"> 

             <hr> 

            </div> 

           </div> 

         <div class="row"> 

            <div class="col-sm-2"> 

              <div>Test</div> 

            </div> 

            <div class="col-sm-8"> 

              <div>Test</div> 

            </div> 

            <div class="col-sm-2"> 

              <div>Business</div> 

            </div> 

           </div> 
          </div> 
         </div> 
        </div> 

       </div> 
      </div> 
     </div> 
    </div> 

</body> 
</html>

出典

2016-12-23 16:12:37 Vcasso

感謝。要素ごとのcolクラスですよね？ –

また、アライメントの問題は修正されていません –

.col-mdと.col-lgを.col-sm divのいずれかに追加し、画面のサイズを変更してみてください。あなたはcol-smしか持っていなかったのと同じことをするでしょう。私はアライメントの問題についてあなたが意味することを理解していません。ブートストラップを使用しているかどうかを尋ね、右のアイコンと下のビジネス名を左に揃えます。これは上記の例で達成されました。 – Vcasso

ブートストラップのヘッダーアイコンと本文のテキストを整列できません

答えて

関連する問題