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网格，因此您可以设置两列或更改元素的顺序，以便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

如果它不起作用，则按以下方式进行TRY，

<div style='float:left'>

代替<div class='pull-left'>和

<div class='float:right'>

代替<div class='pull-right'>相应的

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

2 个答案: