Question

所以我想在浏览器窗口的左侧放置一列社交媒体图标（堆叠图标），然后文本占据5列，其余列为空。这在浏览器窗口较大时工作正常，但是当我开始缩小它时，文本会一直延伸，而不是被约束到5列，它会移动到图标下方。我希望图标列始终占据文本旁边的一列。我错过了什么？我知道我需要做col-sm-x，但是不能让它发挥作用。感谢。

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:blahblahblah@gmail.com" 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;
}

Answer 1

如果要在小屏幕中保留列比，请务必使用col-xs。当您仅在col-md（f.e。col-md-4）中指定列时，bootstrap会告诉浏览器保留从最大到md屏幕大小的4列。之后（在sm和xs屏幕尺寸中）将需要12。

所以在你的例子中：

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

Answer 2

你可以删除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

混淆与缩小Bootstrap中的文本

2 个答案: