如果我使用引导程序，为什么我会在此错误对齐？答案

【问题标题】：Why do I get wrong alignment in this if I use bootstrap?如果我使用引导程序，为什么我会在此错误对齐？
【发布时间】：2013-01-19 04:06:07
【问题描述】：

如果我使用引导程序，它会弄乱我页面上的对齐方式。成员名称应显示在图标旁边，但在 Bootstrap 中，它们会与图标重叠。
我该如何解决这个问题？

此外，当浏览器窗口变小时，方线也会变得混乱。我希望窗口小的时候数据有边框。

所以我不希望它看起来像这样：

而是像这样：

如果可能的话，我希望有这些图标，并且名字在中间而不是在顶部。

演示 http://jsfiddle.net/sbq7X/

HTML

    <div class="store_row">
    <div class="store_left">
        <div class="store_title">walmart</div>
        <div class="store_location">Located in California</div>
    </div>

    <div class="store_right">
        <div class="store_icon">
                <img class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon-300x266.jpg" />
        </div>
        <div class="introduction">
            <div class="name1">John Tailor</div>
            <div class="name2">Mike Smith</div>
            <div class="name3">Jessica Swan</div>
        </div>
    </div>

</div>

    <div class="store_row">
    <div class="store_left">
        <div class="store_title">walmart</div>
        <div class="store_location"><span class='text-error'>Located in California</span></div>
    </div>

    <div class="store_right">
        <div class="store_icon">
                <img class="img-polaroid" src="http://media-cache-ec1.pinterest.com/avatars/walmarthub-1349815045_600.jpg" />
        </div>
        <div class="introduction">
            <div class="name1">John Tailor</div>
            <div class="name2">Mike Smith</div>
            <div class="name3">Jessica Swan</div>
        </div>
    </div>

CSS

div.store_row{
    min-width: 300px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    border:1px solid;
    display:table;
}

div.store_left{
    width: 300px;
    display:inline-block;
    vertical-align:top;    
}

div.store_right{
    width: 300px;   
    display:inline-block;
    vertical-align:top;
    background-color: #FFFFFF;
}

div.store_title{
    background-color: #000000;
    color: #FFFFFF;
    height: 35px;
    padding:5px;
}

div.store_location{
    height: 35px;  
    border-right:1px solid;
    background-color: #FFFFFF;
    padding:5px;
}

div.store_icon{
    width: 70px;
    height: 70px;
    display:inline-block;
}

div.store_icon img{
    width:100%;
    height:100%;
}

div.introduction{
    display:inline-block;
    vertical-align:top;
    width:200px;
    text-align: left;
}

.... and bootstrap

【问题讨论】：

嗯，它肯定与所有 Bootstrap CSS 有关，因为没有它，it looks just fine。
我怎样才能让它好起来？:(
找到冲突的样式。全部淘汰，一点一点添加，直到效果不好。然后决定如何纠正您的或 Bootstraps 样式。

标签： html css twitter-bootstrap css-float

【解决方案1】：

img-polaroid 类有 4px 填充，这会导致问题：

.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

查看删除它的fiddle。

编辑：对齐工作也很好。所有元素都有静态宽度，它们对于小提琴来说太宽了。我已经减小了它们的大小，所以它们现在是内联的。

【讨论】：