看看下面这张图片:
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>
最佳答案
您的响应大小在较小的屏幕尺寸下关闭，或者至少这是我使用 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 尺寸)
这有帮助吗？
关于css - Bootstrap CSS 行对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24294208/