Question

请看下面这张图片：

http://gyazo.com/37bf79015bb42aa688898fb82f3d8c98

它们应如下所示：http://gyazo.com/9dd85e73e331ef035cfad1d8aa8b8d49

如果有人能指出我正确的方向，我已经在这个问题上绞尽脑汁待了几个小时，谢谢！

这是我的代码

    <style type="text/css">
        .imgC{
            display:inline-block;
            float:left;
            padding-right: 5px;
        }

        .textC{
          display:inline-block;
            float:left;
        }
        .settings {
            padding: 10px;
            border-radius: 5px;
            -moz-border-radius: 5px;
            background: rgb(243, 243, 243);
        }
        .settings:hover {
            background: rgb(231, 231, 231);
        }
        .dashboard-panel-6 {
           width: 49.5%;
        }
    </style>
</head>
<body>
    <div class="container" style="margin-top: 40px;">
        <div class="row">
            <a href="#">
                <div class="col-md-6 dashboard-panel-6 settings">
                    <div class="imgC"><i class="fa fa-user fa-3x" style="vertical-align:middle;"></i></div>
                    <div class="textC"><span style="font-size: 12pt;">Profile <br></span><span style="color: #979797;font-size:9pt;">Change your basic account, email settings</span></div>
                </div>
            </a>

            <a href="#">
                <div class="col-md-6 dashboard-panel-6 pull-right settings">
                    <div class="imgC"><i class="fa fa-exclamation fa-3x" style="vertical-align:middle;"></i></div>
                    <div class="textC"><span style="font-size: 12pt;">Notifications <br></span><span style="color: #979797;font-size:9pt;">Tell us how to notify you and what you want to know</span></div>
                </div>
            </a>

            <a href="#">
                <div class="col-md-6 dashboard-panel-6 settings" style="margin-top: 15px;">
                    <div class="imgC"><i class="fa fa-lock fa-3x" style="vertical-align:middle;"></i></div>
                    <div class="textC"><span style="font-size: 12pt;">Password <br></span><span style="color: #979797;font-size:9pt;">Change your password</span></div>
                </div>
            </a>
        </div>
    </div>
</body>

Answer 1

您的响应尺寸在较小的屏幕尺寸下关闭，或者至少是我使用JSFiddle发现的尺寸。

JSFiddle Demo - 伸展结果窗口（右下角）并查看其调整方式。

在较小的窗口大小上查看代码时，请使用xs或sm代替md。

即

<div class="col-xs-6 dashboard-panel-6 settings">
<div class="col-xs-6 dashboard-panel-6 pull-right settings">
<div class="col-xs-6 dashboard-panel-6 settings" style="margin-top: 15px;">

您的代码在技术上是正确的，但是只有在col-md或正在显示（或调整大小）中等大小的显示时，如果您的窗口缩小到sm或xs但是，由于您只指定了md而没有更小的格式，格式将会分崩离析。

响应也缩放了最小尺寸和一切向上，因此md的大小会md +（又名md和lg尺寸），而大小xs将缩放xs +（又名xs，sm，md和lg尺寸）

这有帮助吗？

Bootstrap CSS行对齐问题

1 个答案: