Bootstrap中縮小文本的混亂

所以我想在瀏覽器窗口的左側（圖標堆疊）有一列社交媒體圖標，然後是佔用5列的文本，其餘部分列爲空。當瀏覽器窗口很大時，此功能可以正常工作，但是當我將它縮小時，文本將一直延伸到整個範圍，而不是被限制爲5列，並且它會移動到圖標下方。我希望圖標欄始終佔據文本旁邊的一列。我錯過了什麼？我知道我需要做col-sm-x，只是不能讓它工作。謝謝。Bootstrap中縮小文本的混亂

HTML：

<div class="container-fluid"> 
    <div class="row"> 
     <section class="social-media col-md-1"> 
       <a href="https://www.instagram.com/neon.honey/" target="_blank"> 
        <img class="media-object" src="../bootstrap/images/instagram.png" alt="Instagram"> 
       </a>    
       <a href="https://twitter.com/deephoney/" target="_blank"> 
        <img class="media-object" src="../bootstrap/images/twitter.png" alt="Twitter"> 
       </a> 
       <a href="https://www.pinterest.com/electrodextrose/" target="_blank"> 
        <img class="media-object" src="../bootstrap/images/pinterest.png" alt="Pinterest" /> 
       </a> 
       <a href="mailto:[email protected]" target="_top"> 
        <img class="media-object" src="../bootstrap/images/email.png" alt="Email me!" />    
       </a> 
     </section> 
     <section class="hello col-md-5 col-sm-"> 
      <h1>hello!</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, 
      cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit 
      commodi earum cum blanditiis quos error similique quod, facere! Hic.</p> 
     </section> 
    </div> 
</div>

CSS：

h1 { 
    color: rgb(244, 195, 197); 
    font-family: 'Cookie', sans-serif; 
    font-weight: 400; 
    text-shadow: 2px 2px 1px rgba(192,192,192,0.1); 
    text-transform: lowercase; 
    font-size: 70px; 
    margin-bottom: -5px; 
    text-align: left; 
    } 

h3 { 
    color: rgb(244, 195, 197); 
    text-transform: uppercase; 
    } 

.bgimage { 
    background-image: url('../images/bgimage.png'); 
    background-position: center center; 
    background-size: cover; 
    height: 450px; 
    background-color: rgb(34, 39, 42); 
    padding-top: 25px; 
} 

h4 { 
    margin-top: 1px; 
    text-align: left; 
    font-size: 15px; 
    } 

.social-media { 
    padding-left: 15px; 
    padding-top: 30px; 
} 

.social-media img { 
    padding: 5px; 
}

來源

2015-12-25 ani

請確保您使用col-xs當你想保存，即使在小屏幕比列。當您只指定col-md（f.e. col-md-4）中的列時，引導程序會通知瀏覽器將最大的4列保留爲屏幕大小的md。在那之後（在sm和xs屏幕尺寸），這將需要12

所以在你的例子：

<div class="container-fluid"> 
    <div class="row"> 
     <section class="social-media col-xs-1"> 
     ... 
     </section> 
     <section class="hello col-xs-5">

來源

2015-12-25 22:59:38

，您可以刪除COL-MD-1和處理盒你的自我。

我改變你的代碼

.social-media { 
     float: left; 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-top: 30px; 
    } 

    .social-media a { 
     display: block; 
    } 
    .hello { 
     margin-left: 30px; 
    }

的這部分，結果 http://www.bootply.com/fsRThkzAV9

來源

2015-12-26 04:44:18

Bootstrap中縮小文本的混亂

回答

相關問題