Question

我正在使用Bootstrap按钮组进行导航的网站上工作。但是，我想让它像Navbar一样折叠成汉堡包图标。我做了一些搜索，但没有找到任何解决它。可以折叠按钮组还是我必须使用Navabar？

我尝试使用按钮快速设置Navbar的样式，但是效果不佳，然后我发现一些帖子说不要在Navbar中使用按钮。

以下是我们按钮组的基本布局。

  <div class="btn-group btn-group-sm btn-group-justified">
        <a href="@Url.Action("ScheduleDetails", "Home")" class="menu-item">Schedule</a>
        <a href="@Url.Action("Index", "LogOut")" class="menu-item">Log Out</a>
    </div>

.menu-item {
    .btn;
    .btn-sm;
    .btn-default;
    color: @header-text-color;
    font-size: 1.2rem;
}

Answer 1

你走了：

static AWSCredentials credentials = null;
static {
    try {
        //credentials = new ProfileCredentialsProvider("default").getCredentials();
        credentials = new SystemPropertiesCredentialsProvider().getCredentials();
    } catch (Exception e) {
        System.out.println("Got exception..........");
        throw new AmazonClientException("Cannot load the credentials from the credential profiles file. "
                + "Please make sure that your credentials file is at the correct "
                + "location (/Users/USERNAME/.aws/credentials), and is in valid format.", e);
    }       
}

@Bean
public LettuceConnectionFactory redisConnectionFactory() {
    AmazonElastiCache elasticacheClient = AmazonElastiCacheClientBuilder.standard().withCredentials(new AWSStaticCredentialsProvider(credentials)).withRegion(Regions.US_EAST_1).build();
    DescribeCacheClustersRequest dccRequest = new DescribeCacheClustersRequest();
    dccRequest.setShowCacheNodeInfo(true);

    DescribeCacheClustersResult clusterResult = elasticacheClient.describeCacheClusters(dccRequest);

    List<CacheCluster> cacheClusters = clusterResult.getCacheClusters();
    List<String> clusterNodes = new ArrayList <String> ();
    try {
        for (CacheCluster cacheCluster : cacheClusters) {
            for (CacheNode cacheNode : cacheCluster.getCacheNodes()) {
                String addr = cacheNode.getEndpoint().getAddress();
                int port = cacheNode.getEndpoint().getPort();
                String url =  addr + ":" + port;
                if(<ReplicationGroup Name>.equalsIgnoreCase(cacheCluster.getReplicationGroupId()))
                    clusterNodes.add(url);  
            }
        }
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }       
    LettuceConnectionFactory redisConnectionFactory = new LettuceConnectionFactory(new RedisClusterConfiguration(clusterNodes));
    redisConnectionFactory.setUseSsl(true);
    redisConnectionFactory.afterPropertiesSet();
    return redisConnectionFactory;
}

CSS：

HTML:
    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
               <span class="glyphicon glyphicon-menu-hamburger"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

你可以折叠一个Bootstrap按钮组吗？

1 个答案: