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中缩小文本的混乱

回答

相关问题