Css 引导btn组垂直向右拉显示在Rails应用程序中响应导航栏图像下方

我正在使用Bootstrap重新设计Rails 4应用程序的布局，以使其个性化，但在对齐链接到用户配置文件和登录/注销的按钮时遇到了一些问题

    <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>

我一直在调整，直到我开始研究移动响应，并使用

img responsive

类使徽标和标题横幅都响应。现在，按钮位于标题和品牌徽标下方

    <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>

这就是现在桌面上的样子（带有我希望btn组垂直向右拉的位置的图形）：

    <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>

    <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>

在手机上看起来像这样，与介绍性文字重叠：

    <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>

    <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>

这是

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>

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

    <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>

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

    <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>

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

    <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>

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;
}

---

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

这里有一些方法可以让这一切顺利进行。这可能需要一些实验，所以请随意编辑此答案以符合您的目的

    <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>

  <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类调整不同视口宽度的列数，以接近最佳值。xs已设置为12和12，以便强制溢出并在窄屏幕上显示全宽图像

    <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>

尽管有其他的选项可以做到这一点，但我发现在引导网格系统中工作对于响应性布局来说通常是最可靠的

    <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>

---

另一点：我通常避免直接更新引导的CSS文件，并考虑加载一个附加的CSS文件，然后重写需要扩展的特定Bootstrap类。

导航中的Chrome控制台显示了什么宽度？如果它比不能浮动的可用空间宽。@Phil对于

.navigation

，Chrome控制台显示

宽度：100%

。因为我希望它向右拉，并在标题和标志旁边，这肯定超过了可用空间。因此，将该类的

宽度更改为像素应该有效吗？
    <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>