ブートストラップを含めた後にHTML要素が歪んだ

私は学習HTML/CSSです。私は2つの単純な円とその間に回転する要素を作りました。その後、後の要素を装飾するためにブートストラップを使用することに決めました。しかし、ブートストラップへのリンクを含めるとすぐに、円が歪んでアニメーションが台無しになります。ブートストラップを含めた後にHTML要素が歪んだ

また、オーバーフロー：非表示の文を削除すると、ブラウザのサイズを変更すると、スクロールバーが不規則に動作し始めます。私がそれを許すなら、私は窓の下にそれ以上の内容を挿入することができません。

助けてください！

<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=0.5"> 
 
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> --> 
 
    <style> 
 
    * { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    html, 
 
    body { 
 
     height: 100%; 
 
     margin: 0%; 
 
    } 
 
    
 
    body { 
 
     background-color: #080808; 
 
     overflow: hidden; 
 
    } 
 
    
 
    #spinner, 
 
    #spinner:before, 
 
    #spinner:after { 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 50%; 
 
     background: none; 
 
     border-radius: 50%; 
 
     border: 5px solid cyan; 
 
    } 
 
    
 
    #spinner { 
 
     height: 386px; 
 
     width: 386px; 
 
     margin: -208px; 
 
     border: 15px solid blue; 
 
     z-index: 1; 
 
     border-top: 15px solid red; 
 
     -webkit-animation: spin 1s ease-in-out infinite; 
 
     -moz-animation: spin 1s ease-in-out infinite; 
 
     -ms-animation: spin 1s ease-in-out infinite; 
 
     -o-animation: spin 1s ease-in-out infinite; 
 
     animation: spin 1s ease-in-out infinite; 
 
    } 
 
    
 
    #spinner:before { 
 
     content: ""; 
 
     height: 372px; 
 
     width: 372px; 
 
     margin: -191px; 
 
    } 
 
    
 
    #spinner:after { 
 
     content: ""; 
 
     width: 420px; 
 
     height: 420px; 
 
     margin: -215px; 
 
    } 
 
    
 
    #vline, 
 
    #hline, 
 
    #dline1, 
 
    #dline2 { 
 
     height: 420px; 
 
     position: absolute; 
 
     border-left: 1px solid cyan; 
 
     top: 50%; 
 
     left: 50%; 
 
     margin-top: -210px; 
 
    } 
 
    
 
    #hline { 
 
     -webkit-transform: rotate(90deg); 
 
     -moz-transform: rotate(90deg); 
 
     -o-transform: rotate(90deg); 
 
     -ms-transform: rotate(90deg); 
 
     transform: rotate(90deg); 
 
    } 
 
    
 
    #dline1 { 
 
     -webkit-transform: rotate(45deg); 
 
     -moz-transform: rotate(45deg); 
 
     -o-transform: rotate(45deg); 
 
     -ms-transform: rotate(45deg); 
 
     transform: rotate(45deg); 
 
    } 
 
    
 
    #dline2 { 
 
     -webkit-transform: rotate(-45deg); 
 
     -moz-transform: rotate(-45deg); 
 
     -o-transform: rotate(-45deg); 
 
     -ms-transform: rotate(-45deg); 
 
     transform: rotate(-45deg); 
 
    } 
 
    
 
    @keyframes "spin" { 
 
     0% { 
 
     -webkit-transform: rotate(0deg); 
 
     -moz-transform: rotate(0deg); 
 
     -o-transform: rotate(0deg); 
 
     -ms-transform: rotate(0deg); 
 
     transform: rotate(0deg); 
 
     } 
 
     100% { 
 
     -webkit-transform: rotate(360deg); 
 
     -moz-transform: rotate(360deg); 
 
     -o-transform: rotate(360deg); 
 
     -ms-transform: rotate(360deg); 
 
     transform: rotate(360deg); 
 
     } 
 
    } 
 
    
 
    @-moz-keyframes spin { 
 
     0% { 
 
     -moz-transform: rotate(0deg); 
 
     transform: rotate(0deg); 
 
     } 
 
     100% { 
 
     -moz-transform: rotate(360deg); 
 
     transform: rotate(360deg); 
 
     } 
 
    } 
 
    
 
    @-webkit-keyframes "spin" { 
 
     0% { 
 
     -webkit-transform: rotate(0deg); 
 
     transform: rotate(0deg); 
 
     } 
 
     100% { 
 
     -webkit-transform: rotate(360deg); 
 
     transform: rotate(360deg); 
 
     } 
 
    } 
 
    
 
    @-ms-keyframes "spin" { 
 
     0% { 
 
     -ms-transform: rotate(0deg); 
 
     transform: rotate(0deg); 
 
     } 
 
     100% { 
 
     -ms-transform: rotate(360deg); 
 
     transform: rotate(360deg); 
 
     } 
 
    } 
 
    
 
    @-o-keyframes "spin" { 
 
     0% { 
 
     -o-transform: rotate(0deg); 
 
     transform: rotate(0deg); 
 
     } 
 
     100% { 
 
     -o-transform: rotate(360deg); 
 
     transform: rotate(360deg); 
 
     } 
 
    } 
 
    </style> 
 
    <title>Test</title> 
 
</head> 
 

 
<body> 
 

 
    <div id="spinner"></div> 
 
    <div id="vline"></div> 
 
    <div id="hline"></div> 
 
    <div id="dline1"></div> 
 
    <div id="dline2"></div> 
 

 
</body> 
 

 
</html>

出典

2017-09-03 Enqueue

あなたが追加しようとしていたブートストラップのリンクを追加したい場合があります。 –

ありがとうございます。元のコードを示すためにコメントしました。これを含めると要素が歪められます。 – Enqueue

ブートストラップは、すべてのbox-sizing: border-box;設定します：

は、ここに私のコードです。あなたのスピナー内の要素と擬似要素の設定box-sizing: content-box;：

は

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.spinner-container *, 
 
.spinner-container :after, 
 
.spinner-container :before { 
 
    box-sizing: content-box; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0%; 
 
} 
 

 
body { 
 
    background-color: #080808!important; 
 
    overflow: hidden; 
 
} 
 

 
#spinner, 
 
#spinner:before, 
 
#spinner:after { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    background: none; 
 
    border-radius: 50%; 
 
    border: 5px solid cyan; 
 
} 
 

 
#spinner { 
 
    height: 386px; 
 
    width: 386px; 
 
    margin: -208px; 
 
    border: 15px solid blue; 
 
    z-index: 1; 
 
    border-top: 15px solid red; 
 
    -webkit-animation: spin 1s ease-in-out infinite; 
 
    -moz-animation: spin 1s ease-in-out infinite; 
 
    -ms-animation: spin 1s ease-in-out infinite; 
 
    -o-animation: spin 1s ease-in-out infinite; 
 
    animation: spin 1s ease-in-out infinite; 
 
} 
 

 
#spinner:before { 
 
    content: ""; 
 
    height: 372px; 
 
    width: 372px; 
 
    margin: -191px; 
 
} 
 

 
#spinner:after { 
 
    content: ""; 
 
    width: 420px; 
 
    height: 420px; 
 
    margin: -215px; 
 
} 
 

 
#vline, 
 
#hline, 
 
#dline1, 
 
#dline2 { 
 
    height: 420px; 
 
    position: absolute; 
 
    border-left: 1px solid cyan; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -210px; 
 
} 
 

 
#hline { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 

 
#dline1 { 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
#dline2 { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 

 
@keyframes "spin" { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@-moz-keyframes spin { 
 
    0% { 
 
    -moz-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -moz-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@-webkit-keyframes "spin" { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@-ms-keyframes "spin" { 
 
    0% { 
 
    -ms-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -ms-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@-o-keyframes "spin" { 
 
    0% { 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="spinner-container"> 
 
    <div id="spinner"></div> 
 
    <div id="vline"></div> 
 
    <div id="hline"></div> 
 
    <div id="dline1"></div> 
 
    <div id="dline2"></div> 
 
</div>

EDIT：回転させながら、あなたの#spinnerがbodyを押し出すので、スクロールバーが不安定に表示されます。この問題を解決するには、すべてをコンテナに入れ、コンテナの幅と高さを設定し、中心に配置し、overflow:hidden;を設定します。また、例のための心のメディアクエリの表示がスピナーよりも小さい場合：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.spinner-container *, 
 
.spinner-container :after, 
 
.spinner-container :before { 
 
    box-sizing: content-box; 
 
} 
 

 
.spinner-container { 
 
    overflow: hidden; 
 
    height: 430px; 
 
    width: 430px; 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
} 
 

 
@media (max-height: 430px) { 
 
    .spinner-container { 
 
    transform: translate(-50%,0); 
 
    top: 0; 
 
    } 
 
} 
 
@media (max-width: 430px) { 
 
    .spinner-container { 
 
    transform: translate(0,-50%); 
 
    left: 0; 
 
    } 
 
} 
 
@media (max-height:430px) and (max-width: 430px) { 
 
    .spinner-container { 
 
    transform: none; 
 
    left: 0; 
 
    top: 0; 
 
    } 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0%; 
 
} 
 

 
body { 
 
    background-color: #080808!important; 
 
} 
 

 
#spinner, 
 
#spinner:before, 
 
#spinner:after { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    background: none; 
 
    border-radius: 50%; 
 
    border: 5px solid cyan; 
 
} 
 

 
#spinner { 
 
    height: 386px; 
 
    width: 386px; 
 
    margin: -208px; 
 
    border: 15px solid blue; 
 
    z-index: 1; 
 
    border-top: 15px solid red; 
 
    -webkit-animation: spin 1s ease-in-out infinite; 
 
    -moz-animation: spin 1s ease-in-out infinite; 
 
    -ms-animation: spin 1s ease-in-out infinite; 
 
    -o-animation: spin 1s ease-in-out infinite; 
 
    animation: spin 1s ease-in-out infinite; 
 
} 
 

 
#spinner:before { 
 
    content: ""; 
 
    height: 372px; 
 
    width: 372px; 
 
    margin: -191px; 
 
} 
 

 
#spinner:after { 
 
    content: ""; 
 
    width: 420px; 
 
    height: 420px; 
 
    margin: -215px; 
 
} 
 

 
#vline, 
 
#hline, 
 
#dline1, 
 
#dline2 { 
 
    height: 420px; 
 
    position: absolute; 
 
    border-left: 1px solid cyan; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -210px; 
 
} 
 

 
#hline { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 

 
#dline1 { 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
#dline2 { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 

 
@keyframes "spin" { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@-moz-keyframes spin { 
 
    0% { 
 
    -moz-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -moz-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@-webkit-keyframes "spin" { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@-ms-keyframes "spin" { 
 
    0% { 
 
    -ms-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -ms-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@-o-keyframes "spin" { 
 
    0% { 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="spinner-container"> 
 
    <div id="spinner"></div> 
 
    <div id="vline"></div> 
 
    <div id="hline"></div> 
 
    <div id="dline1"></div> 
 
    <div id="dline2"></div> 
 
</div>

出典

2017-09-03 15:46:20 fen1x

ありがとう！これは正常に動作します。さて、html要素はうまく描画されます。 :) また、オーバーフロー：隠されたことに対する解決策を教えてくれますか？ – Enqueue

@Enqueue私の答えを編集しました – fen1x

ブートストラップを含めた後にHTML要素が歪んだ

答えて

関連する問題