引導讓我修改自己的類，使頁面響應

我創建基於HTML和CSS的項目。我在容器內的bootstrap中創建了這段代碼，我希望它能夠響應。引導讓我修改自己的類，使頁面響應

<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; 
 
}

這裏是我的結果應該是什麼樣子：

結果不響應。我的問題是我做錯了什麼或引導程序不讓我像我一樣修改類？那麼我該怎麼做才能做到這一點呢？響應性所需的所有腳本和鏈接都在我的頁面中，但不適用於較短的演示。謝謝！

來源

2016-08-16 Elda Backa

Bootstrap網格基於具有指定寬度和邊距的列元素工作;你不能只覆蓋那些無所謂，並期望網格仍然工作。做你想做的事情 - 在欄內，但不要搞亂整個網格。 – CBroe

我無法在我的Mac上運行您的代碼段，但只是通過查看代碼，我會刪除width: 80%; height: 100%;如果您確實希望它能夠響應「引導方式」，請嘗試讓它處理您的div容器大小第一。你嘗試過嗎？

看起來響應性方面優良未經您的樣式表：https://jsfiddle.net/DTcHh/23755/

編輯：那些利潤率似乎非常大？也許它看起來像是因爲巨大的利潤率而無法響應。你可以提供它應該是什麼樣子的草圖？

EDIT2：這是我的回答：https://jsfiddle.net/DTcHh/23757/我把它清理了一下。你的問題是，你有太多的div和列;如果您想通過設計抵消事情，您應該再次檢查Bootstrap的網格documentation並使用col-md-offset。

來源

2016-08-16 13:05:45 tech4242

我編輯了我的問題 –

@我剛編輯過我的。我的jsfiddle沒有你的CSS看起來不錯吧？你確定你在html中正確連接了Bootstrap嗎？ – tech4242

確定它沒有css響應，但我一直需要修復佈局，所以我需要修改邊距和空格。我如何在沒有CSS的情況下這樣做？ –

首先我假設你已經正確包含了bootstrap css和js。進一步，你不需要額外的CSS來使你的頁面響應。 Bootstrap這樣做。始終記得引導程序連續有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>

來源

2016-08-16 13:43:22

引導讓我修改自己的類，使頁面響應

回答

相關問題