Twitter bootstrap 在html中向右浮动而不更改div顺序

我试图在不改变html中div列表顺序的情况下浮动：右div。 我有一个div列表，一行中最多显示4个div。当进入新行时，所有剩余的div也必须向右浮动。 将HTMLDIV调整为显示右侧不是一个选项，因为div是动态加载的，可以设置为隐藏（不同的菜单显示给不同的角色，但菜单顺序必须保持不变）。 Html是建立在引导程序上的

请举例说明：

（请记住，新行中的剩余div必须浮动在右侧。）

.3.菜单{
文本对齐：居中；
背景颜色：黄色；
填充：10px；
边框：1px纯黑；
浮动：对；
}
.第一排{
浮动：对；
}

---

谢谢您的帮助。

您可以使用内联元素来完成此操作，而无需使用

float

<div class='container'>
    <span><a href="#">Menu1</a></span>
    <span><a href="#">Menu2</a></span>
    <span><a href="#">Menu3</a></span>
    <span><a href="#">Menu4</a></span>
    <span><a href="#">Menu5</a></span>
    <span><a href="#">Menu6</a></span>
    <span><a href="#">Menu7</a></span>
</div>

.container{
    text-align: right;
}

.container span{
    display: inline-block;
    text-align: center;
    width: 125px;
    height: 20px;
    margin: 3px 0px;
    background: yellow;
}

.集装箱{
文本对齐：右对齐；
}
.货柜跨度{
显示：内联块；
文本对齐：居中；
宽度：125px；
高度：20px；
利润率：3px0px；
背景：黄色；
}

看到这个了吗

<div class='container'>
    <span><a href="#">Menu1</a></span>
    <span><a href="#">Menu2</a></span>
    <span><a href="#">Menu3</a></span>
    <span><a href="#">Menu4</a></span>
    <span><a href="#">Menu5</a></span>
    <span><a href="#">Menu6</a></span>
    <span><a href="#">Menu7</a></span>
</div>

.container{
    text-align: right;
}

.container span{
    display: inline-block;
    text-align: center;
    width: 125px;
    height: 20px;
    margin: 3px 0px;
    background: yellow;
}