Bootstrap CSS行对齐问题答案

【问题标题】：Bootstrap CSS row alignment issueBootstrap CSS行对齐问题
【发布时间】：2014-08-09 06:14:29
【问题描述】：

看看下面这张图片：

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>

【问题讨论】：

标签： css twitter-bootstrap spacing

【解决方案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-sizing 只会发生在 col-md 或显示（或调整大小）中等大小的显示器时，如果您的窗口缩小到 sm 或 xs 但是, 格式将崩溃，因为您只指定 md 而不会更小。

响应式也可以缩放最小尺寸和向上的所有尺寸，因此md 将缩放为md+（又名md 和lg 尺寸），而xs 的尺寸将缩放xs+ （又名xs、sm、md 和 lg 尺寸）

这有帮助吗？

【讨论】：

@user3681580 当然！如果它真的有帮助，请随时支持我的答案并将其标记为正确（单击复选标记），以便其他人也可以从中受益。 :)