Bootstrap中心div旁边有右侧div

时间:2016-02-05 07:34:13

标签: html css twitter-bootstrap

这是我的HTML:

<div class="welcome-banner">
    <div class="container">
        <div class="row">
            <div class="col-md-10 welcome-msg">
                <?php echo $this->getWelcome() ?><?php echo $this->getAdditionalHtml() ?>
            </div>
            <div class="col-md-2 welcome-cart">
                <?php $_cartQty = $this->helper('checkout/cart')->getSummaryCount(); ?>
                <a href="<?php echo Mage::helper('checkout/url')->getCartUrl(); ?>"> <?php echo $this->__('View Cart'); ?>
                    (<?php echo $_cartQty ?: '0'; ?>)</a>
            </div>
        </div>
    </div>
</div>

以下是显示的内容:

[![在此处输入图像说明] [1]] [1]

现在我的问题是..“欢迎信息”文本不是以整个栏为中心,只是col-md-10

的div

有没有办法执行此操作,以便view cart (0)与右侧对齐,welcome message text居中?

整个事情必须如下所示: [![在此处输入图像说明] [2]] [2]

3 个答案:

答案 0 :(得分:1)

您可以试用fiddle

究竟发生了什么,您首先将整个div文本居中。之后,只需pull-right您希望在右侧粘贴的内容。

当然,这需要Bootstrap。对于非Bootstrap解决方案,只需使用text-align: center;div内容置于中心位置,然后使用float: right;获取必须贴在右侧的内容。

编辑:就布兰登所说,这是行不通的。这里的问题是两个元素都在同一个容器中,并且也具有相同的相关性。换句话说,右侧拉伸跨度将在居中文本之后显示,这显然会导致错误行为,如here所示。

由于您希望它们彼此完全独立,因此您必须考虑使用absolute定位。这个fiddle显示了如何执行此操作。

注意:请记住,您的父容器需要相对定位。否则,你可能会弄乱你的造型。

答案 1 :(得分:1)

正如大家所提到的,你可以使用pull-right类。

<div class="welcome-banner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 welcome-msg text-center">
                <?php echo $this->getWelcome() ?><?php echo $this->getAdditionalHtml() ?>

                <?php $_cartQty = $this->helper('checkout/cart')->getSummaryCount(); ?>
                <a class='pull-right' href="<?php echo Mage::helper('checkout/url')->getCartUrl(); ?>"> <?php echo $this->__('View Cart'); ?>
                    (<?php echo $_cartQty ?: '0'; ?>)</a>
            </div>
        </div>
    </div>
</div>

答案 2 :(得分:1)

有关Bootstrap示例解决方案,请参阅http://www.bootply.com/wycAs23Jcn

    <div class="row">
        <div class="col-md-12 welcome-msg">
          <p>welcome message</p>
          <span class="pull-right">view cart (0)</span>
        </div>
    </div>

如果您想将“欢迎信息”居中,则应使用 class =“col-md-12”

然后在具有text-align:center样式的div中添加代码。

然后只需将 pull-right 添加到与文本对齐的正确内容中。