这是我的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
有没有办法执行此操作,以便view cart (0)
与右侧对齐,welcome message text
居中?
整个事情必须如下所示: [![在此处输入图像说明] [2]] [2]
答案 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 添加到与文本对齐的正确内容中。