css - Bootstrap btn-group-vertical pull-right 显示在 Rails 应用程序中的响应式导航栏图像下方

Question

我正在使用 Bootstrap 重做我的 Rails 4 应用程序的布局以使其个性化，但在对齐链接到用户个人资料和登录/注销的按钮时遇到了一些问题。

在我开始研究移动响应并使用 img-responsive 类使 Logo 和标题横幅响应之前，我一直在努力对齐。现在，按钮位于标题和品牌 Logo 下方。

这是它现在在桌面上的样子(带有我希望 btn-group-vertical pull-right 去的位置的绘图):

在移动设备上看起来像这样，与介绍性文字重叠:

这是 application.html.erb 的部分:

    <img src="http://static1.squarespace.com/static/54adc070e4b0c8f53bde4cf9/t/5602e062e4b0d28c8246fa6d/1443029092179/?format=750w" class="img-responsive">



</div>
</div>

</div>

  <div class="navigation pull-right">
    <div class="btn-group-vertical pull-right" role="group" aria-label="...">



    <% if user_signed_in? %>
     <button type="button" class="btn btn-default"><%= link_to current_user.full_name, edit_user_registration_path %></button>
    <button type="button" class="btn btn-default"><%= link_to "My Events", myevents_path %></button>
     <button type="button" class="btn btn-default"><%= link_to "Log Out", logout_path %></button>
    <% else %>
       <button type="button" class="btn btn-default"><%= link_to "Register", register_path %></button>
       <button type="button" class="btn btn-default"><%= link_to "Log in", login_path %></button>
    <% end %>

  </div>
    </div>
     </div>

      </div>
      </div>
       </div>
  </div>
      <div class="text">
      Register Now. Win free prizes. Get a free fitted helmet and rail pass while supplies last. Ensure your seat at WHEELS conference sessions.
    </div>
    </div>


</div>

虽然我在 bootstrap.css 中添加和修改了这些样式:

.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

-decoration: none;
}
.navbar-brand > img {
  display: block;

}

.btn-group, .btn-group-vertical {
     position: relative;
     display: inline-block;
    vertical-align: middle;
 }

.text {
  display: inline-block;
  padding-left: 200px;
  font-style: italic;
}

.navigation {
  padding-right: 25px;
  /*display: inline-block;*/
  clear: none;
  margin-left: auto;
  margin-right: auto;
  float: right;
}

我添加了一个新的 div 来包含按钮并以这种方式修改位置，但它似乎没有做任何事情。

我尝试通过剪切和粘贴到与页眉相同的 div 来修改按钮组的位置，但它似乎不起作用。事实上，它倾向于向页面添加更多空白空间，将其放在横幅后面的描述性文本下方(通常，按钮与该文本处于同一级别)。

Chrome 的开发者工具在这种情况下也不是很有用。这是我的输出:

Inherited from HTML
wheels-registration-yamilethmedina.c9.io/media="all"
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheetdiv {
    display: block;
}

Pseudo ::before element
wheels-registration-yamilethmedina.c9.io/media="all"
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
wheels-registration-yamilethmedina.c9.io/media="all"
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

我怀疑我在某处抵消了某些东西，但不确定是什么。如果有人能帮助我指明正确的方向，我将不胜感激。

Answer 1

这里有一些选项可以使这项工作正常进行。这可能需要进行一些实验，因此请随意编辑此答案以满足您的目的。

  <div class="navigation pull-right">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-9 col-lg-10">
         <img src="http://static1.squarespace.com/static/54adc070e4b0c8f53bde4cf9/t/5602e062e4b0d28c8246fa6d/1443029092179/?format=750w" class="img-responsive">
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
        <div class="btn-group-vertical pull-right" role="group" aria-label="...">
        ... menu code goes here ...
      </div>
    </div>
  </div>

这种方法使用列来提供响应，同时试图避免必须固定图像和菜单元素的宽度。您可以使用 xs、sm、md、lg 类调整各种视口(viewport)宽度的列数，以接近最佳值。 xs 已设置为 12 和 12 以强制溢出并在窄屏幕上为您提供全宽图像。

虽然还有其他选择可以做到这一点，但我发现在 Bootstrap 网格系统中工作通常对于响应式布局来说是最可靠的。

另一点:我通常会避免直接更新 bootstrap css 文件，并考虑加载一个额外的 css 文件，这只会覆盖您需要扩展的特定 bootstrap 类。