ブートストラップで自分のクラスを修正してページを応答させます

Question

私はhtmlとcssに基づいてプロジェクトを作成しています。私はコンテナ内のブートストラップにこのコードを作成しました。これを応答したいと思っています。ここで

<div class=" container"> 
 

 
    <div class="row"> 
 

 
    <div class="col-md-12 col-sm-12 client "> <b>SEI GIÀ CLIENTE? ACCEDI </b> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-3 col-sm-3"></div> 
 
    <div class="col-md-3 col-sm-3 labelField"> 
 
     <div class="row"> 
 
     <div class="col-md-4 col-sm-4 labelField"> 
 
      <strong><br>EMAIL</strong> 
 
     </div> 
 
     <div class="col-md-8 col-sm-8"> 
 
      <input class="ut" type="mail"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-3 col-sm-3"></div> 
 
    <div class="col-md-3 col-sm-3 labelField"> 
 
     <div class="row"> 
 
     <div class="col-md-4 col-sm-4 labelField"> 
 
      <strong><br>PASSWORD</strong> 
 
     </div> 
 
     <div class="col-md-8 col-sm-8"> 
 
      <input class="ut" type="mail"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6"></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-3 col-sm-3 col-xs-3 "></div> 
 
    <div class="col-md-6 col-sm-6 col-xs-6 pass"><a href="#"> Hai dimenticato la password?</a> 
 
    </div> 
 
    <div class="col-md-3 col-sm-3 col-xs-3"></div> 
 
    </div> 
 

 

 
    <div class="row"> 
 

 
    <div class="col-md-12 col-sm-12 "> 
 
     <a href="#"> 
 
     <img src="images/entra.png" class="img-responsive registrati "> 
 
     </a> 
 
    </div> 
 

 
    </div> 
 
    <div class="row"> 
 

 
    <div class="col-md-12 col-sm-12 "> 
 
     <a href="#"> 
 
     <img src="images/fb.png" class="img-responsive registrati "> 
 
     </a> 
 
    </div> 
 

 
    </div> 
 

 

 

 
    <div class="row"> 
 

 
    <div class="col-md-12 col-sm-12 "> 
 
     <div class="divider"></div> 
 

 
     </div

私のCSSです：結果が応答しない ：

ここ

.registrati { 
 
    margin-top: 20px; 
 
    margin-left: 338px; 
 
    margin-bottom: 8px; 
 
    width: 33%px; 
 
} 
 
.pass { 
 
    font-style: Arial black; 
 
    color: black; 
 
    font-size: 0.8em; 
 
    margin-left: 339px; 
 
    margin-bottom: 20px; 
 
    margin-top: 20px; 
 
    text-decoration: underline; 
 
} 
 

は次のように私の結果はどうあるべきかです。私の質問は私が何か間違ったことをしたか、あるいはブートストラップが私のようにクラスを修正することを許さないのですか？私はこれを反応的にするために何をすべきですか？ レスポンシブに必要なすべてのスクリプトとリンクは私のページにありますが、短いデモのためにここにはありません。ありがとう！

Answer 1

私のMac上でスニペットを実行することはできませんが、コードを見るだけで削除します。width: 80%; height: 100%;「ブートストラップの方法」に本当に反応したい場合は、divコンテナを最初にサイズを指定します。あなたはそれを試しましたか？

は、あなたのスタイルシートなしで応答性の面で正常に見える：https://jsfiddle.net/DTcHh/23755/

EDIT：それらのマージンはかなり大規模なように見えますか？おそらく巨額の利益のために反応しないように見えるかもしれません。多分それはどのように見えるべきかのスケッチを提供できますか？

EDIT2：ここは私の答えです：https://jsfiddle.net/DTcHh/23757/私はそれを少しきれいにしました。あなたの問題は、あまりにも多くのdivと列があったことでした。ブートストラップのグリッドdocumentationを再度チェックアウトし、設計によって物事を相殺したい場合はcol-md-offsetを使用してください。

Answer 2

まず、bootstrap cssとjsを適切に含めることを前提としています。あなたのページを反応させるために、さらにCSSを書く必要はありません。ブートストラップはそれを行います。ブートストラップには常に12列の行があることを常に忘れないでください。だからあなたのページのためにそれを正しく使用して応答性を示す必要があります。

<div class="container contain"> 
     <div class="row"> 
      <div class="col-lg-3 col-md-4 col-sm-2 col-xs-12 text-center"> 
       <a href="#"> 
        <img src="https://www.google.co.in/logos/doodles/2016/2016-doodle-fruit-games-day-12-5125886484414464.3-scta.png" class="registrati img-responsive"> 
       </a> 
      </div> 
      <div class="col-lg-6 col-md-4 col-sm-8 col-xs-12 pass text-center"> 
       <a href="https://www.google.co.in/logos/doodles/2016/2016-doodle-fruit-games-day-12-5125886484414464.3-scta.png"> 
        Hai dimenticato la password? 
       </a> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-2 col-xs-12 text-center"> 
       <a href="#"> 
        <img src="https://www.google.co.in/logos/doodles/2016/2016-doodle-fruit-games-day-12-5125886484414464.3-scta.png" class="registrati img-responsive"> 
       </a> 
      </div> 
     </div> 
    </div>