Bootstrap pull-left和pull-right没有响应

Question

我的HTML如下所示：

<div class="thumbnail news-listing">
        <div>
        <img class="img-responsive fr-draggable" src="/CustomContents/DSC03804.JPG">
        </div>
        <div class="caption">
            <h4 class="">Test Article</h4>

            <p class="">
        </p><p>Test News</p><p></p>
            <p></p> 
            <div class="btn-block">
                <div class="pull-left">

                    <a href="/News/Test-Article" class="btn btn-default btn-xs pull-left" role="button">More Info</a>
                </div>

                <div class="pull-right">

                    <a style="cursor:pointer" class="btn btn-default btn-xs" role="button"><i class="glyphicon glyphicon-calendar"></i>18/11/2016</a>

                </div>
            </div>
            </div>
    </div>

如果没有足够的空间，我希望底部的两个链接一个接一个地响应，但它们看起来像这样。我做错了什么？

​

​

Answer 1

或者使用bootstraps grid，这样您可以设置两列，或者更改元素的顺序，以便在源代码中pull-right列在pull-left列之前。

<div class="thumbnail news-listing">
    <div><img class="img-responsive fr-draggable" src="/CustomContents/DSC03804.JPG" alt="" /></div>
    <div class="caption">
        <h4 class="">Test Article</h4>
        <p class="">&nbsp;</p>
        <p>Test News</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <div class="btn-block">
            <div class="pull-right"><a class="btn btn-default btn-xs" style="cursor: pointer;">18/11/2016</a></div>
            <div class="pull-left"><a class="btn btn-default btn-xs pull-left" href="/News/Test-Article">More Info</a></div>
        </div>
    </div>
</div>

Answer 2

如果它不工作，那么尝试如下所示，

<div style='float:left'> 

相反，<div class='pull-left'>和

<div class='float:right'>

而是<div class='pull-right'>腐蚀响应