html - 缩小浏览器时，CSS组按钮div脱离行和列

Question

我尝试添加
position: absolute，right: 0，边距和填充...但是由于某些原因，当我使浏览器变小（如平板电脑和手机尺寸）时，btn-group从列和行中移出，变得像浏览器。
有人可以向我解释为什么会这样吗？
谢谢。

结果：first one is when browser if large and second when i minimize it

<div class="jumbotron" style="margin-bottom: 0;background- 
image:url('img/tumeric.jpg');background-size:cover;height:auto;padding- 
top:10px;margin-top:0px;padding-bottom:10px;padding-right:0;padding-left:0">

  <div class="row" style="margin-bottom:0;background-color:aqua;margin- 
      right:3px;margin-left:3px;">       
    <div class="col-xs-12 col-sm-3 col-md-3">

    </div>
    <div class="col-xs-12 col-sm-2 col-md-2">
        <asp:ImageButton ID="ImageButton1" runat="server" 
             ImageUrl="img/Untitled_burned.png" CssClass="img-res-1" />
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2" id="hlink">
        <asp:HyperLink ID="HyperLink1" runat="server" ForeColor="#ffffff" 
             Font-Bold="true" Font-Size="Large">JOIN US!</asp:HyperLink>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3" style="padding-left:10px;">  
        <asp:Label ID="lblEmail" runat="server" Text="Label"/>

        <div class="btn-group" runat="server" id="btnProfile">
          <button type="button" class="btn btn-success">User</button>
          <button type="button" class="btn btn-success dropdown-toggle 
            dropdown-toggle-split" data-toggle="dropdown" aria- 
            haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <div class="dropdown-menu">
            <p class="dropdown-header" aria-readonly="true" style="text- 
                   decoration:none;">User Info</p>
            <a class="dropdown-item" 
               href="Personal_Profile_.aspx">Profile</a>
            <a class="dropdown-item" href="My_Food_List_.aspx">My Menu</a>
            <a class="dropdown-item" href="User_Meal_Plan_.aspx">Plan</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Sign Out</a>
          </div>
        </div>

        <div class="header-btn">
            <asp:Button ID="btnJoin" runat="server" Text="تسجيل الدخول" 
                CssClass="btn btn-lg btn-primary" style="background- 
               color:forestgreen;border-color:forestgreen;" 
               OnClick="btnJoin_Click" />
        </div>
    </div>
    <div class="col-xs-12 col-sm-2 col-md-2">

    </div>
   </div>

Answer 1

您应该使用CSS媒体查询为特定的窗口大小设置特定的样式。
例如

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

有关完整参考，请参见此链接
https://www.w3schools.com/css/css_rwd_mediaqueries.asp