html - 如何在 Bootstrap 的帮助下将标题的一部分右对齐

Question

我试图找到一个解决方案，但没有按照我想要的方式工作。我从 Bootstrap 开始，我可能错过了一些东西。

目前，我有以下代码(示例代码 here)，它的工作方式与此类似

大屏幕标题

|[   Website name  ]                  |
|                            [log off]|
|                       [[ lan1ang2 ]]|

移动屏幕的标题

|[   Website name  ]                    |
|                              [log off]|
|                   [[ lang1 ][ lang2 ]]|

---

我希望大屏幕的标题看起来像这样:

|[   Website name  ]           [ log off ]|
|                     [[ lang1 ][ lang2 ]]|

移动屏幕的标题应该是这样的:

|[   Website name  ]             |
|[[ lang1 ][ lang2 ]]   [log off]|

感谢任何提示或答案。

Answer 1

您需要更多地涉足 Grid Template for Bootstrap看看当你的屏幕是小的col-xs-X(移动设备)、中的col-md-X(平板电脑)或大的col-lg-时会发生什么X(桌面)。你只为桌面设置了一个网格，但如果用户在他的手机上怎么办？

解决此问题的更好方法是移动优先方法，这样您就可以扩展 Canvas (因为网站只是一幅画)并更好地控制页面上发生的事情。

Here's a JSFiddle看看你想要什么。

要获得您想要的内容，元素应在移动设备上以相同的长度显示(因此左侧区域和右侧区域的 col-xs-12 相等)。注意平板电脑上的区别:col-md-8 和 col-md-4。我希望这能让您开始了解有关 Bootstrap 中的网格模板的更多信息。