ブートストラップレスポンスレイアウトが小さな画面で壊れています

Question

通常の高解像度の画面では問題なく表示されますが、小さな解像度の画面では画面が壊れます。私はcol-xs-12のようなクラスを使ってみましたが、まだ正しく表示されませんでした。

<div class="container-fluid about-page-background"> 
    <div class="container" style="height: 289px; margin-top: 60px; padding-left: 60px; padding-right: 60px;"> 
    <div class="row"> 
     <div class="col-md-8 col-xs-12 about-staf"> 
     <span>Lorem ipsum dolor sit amet</span> 
     <span>consectetur adipisicing elit, sed</span> 
     <span>do eiusmod tempor incididunt ut</span> 
     <span>labore et dolore magna aliqua.</span> 
     </div> 
     <div class="col-md-4 col-xs-12 about-join"> 
     <span>Ut enim ad?</span> 
     <a href="#" class="btn btn-warning join-button">minim veniam, 
quis</a> 
     <span class="volunteer-info">nostrud exercitation ullamco laboris<a href="#"> laboris nisi ut aliquip</a></span> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12 col-xs-12 about-text"> 
     <span> 
       ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     </span> 
     <br /> 
     <br /> 
     <span>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> 
     </div> 
    </div> 
    </div> 
</div> 

フルコードcan be viewed on plunkr。

Answer 1

divに固定height: 600pxが指定されています。したがって、幅を変更すると、コンテンツは自動的にスペースに合わせて下がります。

高値を600pxに固定するには、meadia queryを入力します。メディアクエリを使用すると、フォントサイズとパディングが減少します。例えば

：

CSS

@media screen and (max-width: 480px){ 
    .container{ 
    padding: 1em !important; 
    } 
    .col-md-8.col-xs-12.about-staf span{ 
    font-size: 27px; 
    } 
} 

注：上記すべてのクラスは、あなたのplunkrからです。このような

はbuttonの幅、フォントサイズ、他のパディングなど