当浏览器宽度较小时，布局具有较宽的行

Question

这是我的标记：

                <style>
                    a.item
                    {
                        border:1px solid #aaa;
                        background:#ddd;
                        padding:10px;
                        display:block;
                    }
                    span.price
                    {
                        display:block;
                        text-align:center;
                        background:#555;
                        color:white;
                    }
                </style>
                <div class="main">
                    <div class="row">
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a class="item" href="#">
                                <div class="row">
                                    <div class="col-md-6">
                                        IMAGE
                                    </div>
                                    <div class="col-md-6">
                                        <span class='price'>123.45</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

它看起来很好 - 像这样：

然而问题是 - 当减小浏览器窗口的宽度时，它会破坏布局并且看起来像这样：

“形象”和价格不再是并排了......任何想法我的代码有什么问题？

感谢

Answer 1

在col-xs-6旁边加col-md-6。

https://jsfiddle.net/gqmarfkh/ jsFiddle - 我改变了其中两个作为例子。

Answer 2

如果将.col-md-6更改为col-xs-6，它应该可以解决您的问题。 col-md-6类没有任何值，直到屏幕大小为中等。类col-xs- *将具有x-small和up的值。查看此链接：http://getbootstrap.com/css/#grid-options