随着浏览器变小，下拉更改宽度

时间：2017-04-18 13:11:45

标签： html css twitter-bootstrap css3 styles

当浏览器大小很大时，一切似乎都能正常工作......但是当右侧的下拉列表打开并且用户缩小浏览器大小时......右侧的下拉列表会更改宽度，用户图像会从右侧浮动离开了。

我试过给它一个固定的宽度......它固定宽度但仍然向左漂浮。似乎是引导程序而不是我的自定义样式

JSFiddle Demo 

img.logo {
  margin-top: -12px;
  height: 55px;
}

.navigation .top-nav .navbar-inverse li a {
  height: 60px;
  line-height: 30px;
}

.navigation .top-nav a,
.navigation .top-nav .navbar-nav>li>a {
  color: white;
}

.navbar-inverse .navbar-nav>.user.open>a,
.navbar-inverse .navbar-nav>.user.open>a:hover,
.navbar-inverse .navbar-nav>.user.open>a:focus {
  background-color: #282c36;
}

#profile-img {
  height: 40px;
  width: 40px;
  border-radius: 40px;
  margin-right: 10px;
  position: relative;
  bottom: 3px;
}

.user .dropdown-menu {
  background-color: #282c36;
  border: 0;
  text-align: center;
  color: white;
  min-width: 100px !important;
}

.user .dropdown-menu li {
  padding: 5px 0 5px 0;
  margin: 0 15px 0 15px;
  height: 50px !important;
  background-color: #282c36 !important;
  color: white !important;
}

.user .dropdown-menu li a {
  height: 100% !important;
  background-color: #282c36 !important;
  color: white !important;
}

.user .dropdown-menu li:hover,
.user .dropdown-menu li a:hover {
  cursor: pointer;
  background-color: #282c36 !important;
  color: white;
}

.navigation .top-nav .navbar-inverse>ul>li {
  padding-left: 8px;
}

.top-nav .navbar-collapse.collapse {
  display: block!important;
}

.top-nav .navbar-nav>li,
.navbar-nav {
  float: left !important;
}

.top-nav .navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.top-nav .navbar-right {
  position: absolute !important;
  right: 15px !important;
}

@media(max-width: 767px) {
  .navigation .top-nav .navbar-inverse {
    height: 60px;
  }
  .top-nav .navbar-right {
    float: right !important;
    position: absolute !important;
    top: -8px !important;
    right: 15px !important;
  }
  .top-nav .cart a {
    margin-top: 6px;
  }
  .top-nav .user {
    top: 5px;
  }
  .top-nav .cart {
    padding-top: -5px !important;
  }
  .top-nav .user .dropdown-menu {
    z-index: 999 !important;
    background-color: #282c36 !important;
    position: relative !important;
    top: -5px;
  }
  .top-nav .navbar-header {
    height: 60px !important;
  }
  .navigation .top-nav .navbar-inverse a {
    line-height: 30px;
  }
}
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="top-nav">
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="logo" />
      </a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <li class="dropdown user">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="http://freefacebookhakken.nl/img/profile-pic.png" id="profile-img"><i class="glyphicon glyphicon-chevron-down" id="profile-toggle"></i></a>
            <ul class="dropdown-menu">
              <li><a href="#">Testing </a></li>
              <li><a href="#">Contact us</a></li>
              <li><a href="#">Test</a></li>
            </ul>
          </li>
      </ul>
    </div>
  </nav>
</div>

第一次屏幕截图

First Screenshot

第二次屏幕截图

Second Screenshot

3 个答案:

答案 0 :(得分：0)

此css更新将解决您的宽度问题。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition>
            <RowDefinition.Style>
                <Style TargetType="RowDefinition">
                    <Setter Property="Height" Value="*" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsBottomExpanded}" Value="True">
                            <Setter Property="Height" Value="Auto" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>
        <RowDefinition>
            <RowDefinition.Style>
                <Style TargetType="RowDefinition">
                    <Setter Property="Height" Value="Auto" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsBottomExpanded}" Value="True">
                            <Setter Property="Height" Value="*" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RowDefinition.Style>
        </RowDefinition>
    </Grid.RowDefinitions>

    <Expander
        Grid.Row="0"
        Margin="5"
        Header="Server Connections"
        IsExpanded="{Binding IsTopExpanded}">
        <TextBlock>*** ListBox With Content ***</TextBlock>
    </Expander>

    <Expander
        Grid.Row="1"
        Margin="5"
        Header="Server Browser"
        IsExpanded="{Binding IsBottomExpanded}">
        <TextBlock>*** Some Content ***</TextBlock>
    </Expander>
</Grid>

JSFiddle Link

看起来你还有一些其他的问题（当短线时导航条边缘变直，短线时导线条出现在导航栏中，短线时线条高度会变短）。

答案 1 :(得分：0)

Bootstrap的导航栏类具有调整定位的媒体查询，因此它们可与可切换的移动导航栏集成。但是你没有使用它，下拉菜单中使用的导航栏右侧类有一个媒体查询，可以调整最大宽度的定位：767px，这可能会导致你看到的问题。

你必须在bootstrap css文件中更改该媒体查询（或者添加你自己的css以防止那些媒体查询更改，但可能会很混乱。例如，我尝试在jsfiddle中添加.user {min -width：160px;}这部分解决了你的问题，你可以通过添加那个来看看我的意思，或者使用你自己的类的下拉菜单（你可以轻松地从these开始）。 / p>

答案 2 :(得分：0)

找到问题的代码段。感谢。

＆＃13;
＆＃13; 
.top-nav {
            float: left;
            width: 100%;
            clear: both;
        }
        
        img.logo {
            margin-top: -12px;
            height: 55px;
        }
        
        .navigation .top-nav .navbar-inverse li a {
            height: 60px;
            line-height: 30px;
        }
        
        .navigation .top-nav a,
        .navigation .top-nav .navbar-nav>li>a {
            color: white;
        }
        
        .navbar-inverse .navbar-nav>.user.open>a,
        .navbar-inverse .navbar-nav>.user.open>a:hover,
        .navbar-inverse .navbar-nav>.user.open>a:focus {
            background-color: #282c36;
        }
        
        #profile-img {
            height: 40px;
            width: 40px;
            border-radius: 40px;
            margin-right: 10px;
            position: relative;
            bottom: 3px;
        }
        
        .user .dropdown-menu {
            background-color: #282c36;
            border: 0;
            text-align: center;
            color: white;
            min-width: auto !important;
        }
        
        .user .dropdown-menu li {
            padding: 5px 0 5px 0;
            margin: 0 15px 0 15px;
            height: 50px !important;
            background-color: #282c36 !important;
            color: white !important;
        }
        
        .user .dropdown-menu li a {
            height: 100% !important;
            background-color: #282c36 !important;
            color: white !important;
        }
        
        .user .dropdown-menu li:hover,
        .user .dropdown-menu li a:hover {
            cursor: pointer;
            background-color: #282c36 !important;
            color: white;
        }
        
        .navigation .top-nav .navbar-inverse>ul>li {
            padding-left: 8px;
        }
        
        .top-nav .navbar-collapse.collapse {
            display: block!important;
        }
        
        .top-nav .navbar-nav>li,
        .navbar-nav {
            float: left !important;
        }
        
        .top-nav .navbar-nav.navbar-right:last-child {
            margin-right: -15px !important;
        }
        
        .top-nav .navbar-right {
            position: absolute !important;
            right: 15px !important;
        }
        
        @media(max-width: 767px) {
            .navigation .top-nav .navbar-inverse {
                height: 60px;
            }
            .top-nav .navbar-right {
                float: right !important;
                position: absolute !important;
                top: -8px !important;
                right: 15px !important;
            }
            .top-nav .cart a {
                margin-top: 6px;
            }
            .top-nav .user {
                top: 5px;
            }
            .top-nav .cart {
                padding-top: -5px !important;
            }
            .top-nav .user .dropdown-menu {
                z-index: 999 !important;
                background-color: #282c36 !important;
                position: relative !important;
                top: 50px;
            }
            .top-nav .navbar-header {
                height: 60px !important;
            }
            .navigation .top-nav .navbar-inverse a {
                line-height: 30px;
            }
        }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="top-nav">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header pull-left">
                <a class="navbar-brand" href="#">
                    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="logo" />
                </a>
            </div>
            <div class="pull-right">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown user">
                        <a href="#" class="dropdown-toggle pull-right" data-toggle="dropdown"><img src="http://freefacebookhakken.nl/img/profile-pic.png" id="profile-img"><i class="glyphicon glyphicon-chevron-down" id="profile-toggle"></i></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Testing </a></li>
                            <li><a href="#">Contact us</a></li>
                            <li><a href="#">Test</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题