我正在尝试在 a 中右对齐导航栏项目（贡献），navbar.js但我似乎无法弄清楚。导航栏是一个 React 组件，如下所示，
导航栏.js 在这里
import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import { browserHistory, Router, Route } from 'react-router'
var ReactDOM = require('react-dom');
// create classes
var NavBar = React.createClass({
render: function(){
return(
<nav className="navbar navbar-inverse navbar-static-top">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} />
</div>
<div className="collapse navbar-collapse" id="navbar-collapse">
<NavMenu links={this.props.links} /> …我一直在寻找文档,似乎无法找到一种方法在jQuery mobile中制作可滚动的水平导航栏有没有人完成这个呢？
这是迄今为止我对导航栏的用处
<div data-role="header" data-scroll="x">
<ul>
<li class="logo"><a href="#"><img src="img/iphoneheader.gif" alt="Penn State Live" /></a></li>
<li id="link"><a href="#type=colleges">Colleges</a></li>
<li><a href="#">Campuses</a></li>
<li><a href="#">Faculty and Staff</a></li>
<li><a href="#">Of Interest</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Newswire Subscription</a></li>
<li><a href="#">PSUTXT</a></li>
</ul>
</div>
这让我疯了......这可能很简单,因为我没有打钉:请给出一个提示:-)
我正在尝试使用Bootstrap 3为我的网站添加新的布局.滚动时,我希望导航栏固定在屏幕顶部.
我得到了它的工作,但是当词缀类开始时,导航栏下面的内容会发生变化.我无法找到它的方法.
我在这里使用这个引导程序模板为我的应用程序创建一个页面.在中间列(col-sm-7),我将有一个表单,我想在底部创建一个页脚/导航栏/区域,它固定在底部,这样我就可以添加按钮(例如,保存,接下来,回来).
我正在尝试不同的东西,如页脚元素,带有'navbar-fixed-bottom'的bootstrap导航栏和带有div的普通行,其中bootom为0且位置固定,但似乎没有工作正常.
问题是当我添加上面提到的任何这些样式时,固定在底部的元素的宽度不会保持在中心(col-sm-7)列中.它最终跨越整个页面或不够.我只是无法让它包含在居中的列中
这里有任何建议可以把东西,任何东西固定在中间栏的底部,这样我就可以把按钮放在里面了!
这是我到目前为止尝试过的一些东西
这个是一个页脚.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul …我正在尝试创建一个基于响应Bootstrap 3的导航栏,有两行.但是,我遇到了HTML结构和折叠功能的问题.
下面是对所需结果的直观描述,我希望有人可以指出我在HTML/CSS方面的正确方向(尽可能多的默认Bootstrap功能).
基本上,菜单需要执行以下操作:
在平板电脑/台式机设备上,第一行是徽标和小型辅助链接菜单(Link1-3).第二行是带有主链接的主菜单(LinkA-E).
在移动设备上,经典的折叠设计应该带有徽标和汉堡包图标.展开的菜单应首先显示主链接(LinkA-E),然后显示辅助链接(Link1-3).
平板/台式设备:
|----------------------------------------------------------|
| LOGO/BRAND Link1 Link2 Link3 |
|----------------------------------------------------------|
| LinkA LinkB LinkC LindD LinkE |
|----------------------------------------------------------|
移动设备(已折叠):
|--------------------------------------|
| LOGO/BRAND HAMBURGER |
|--------------------------------------|
移动设备(扩展):
|--------------------------------------|
| LOGO/BRAND HAMBURGER |
|--------------------------------------|
| LinkA |
| LinkB |
| LinkC |
| LinkD |
| LinkE |
|--------------------------------------|
| Link1 |
| Link2 |
| Link3 |
|--------------------------------------|
我正在使用Bootstrap,其全局导航栏固定在页面主体的顶部.
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">MyBrand</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#>Page 1</li>
<li><a href="#>Page 2</li>
<li><a href="#>Page 3</li>
</ul>
</div>
</div>
</div>
</div>
我在主体顶部添加了40px的边距,以使页面内容的顶部不会被导航栏覆盖.
body {
background-color: #f5f5f5;
position: relative;
margin-top: 40px;
}
到那里,一切正常.我还使用内部锚点来简化页面内部的导航,使用Twitter与Bootstrap文档中的词缀组件一起使用的相同机制,使用户能够跳转到页面中的不同部分(请参阅http:// twitter.github.com/bootstrap/getting-started.html)
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
[...]
<section id="section1">
[...]
[...]
[...]
</section
<section id="section2">
[...]
[...]
[...]
</section
<section …我有一个关于navbar-fixed-top的问题.好吧,我有一个简单的问题.我的固定导航栏涵盖了内容,例如在"关于我们"页面中,它涵盖了"关于我们"标题的行.
我不知道如何解决它,因为当我调整网站大小(移动设备大小)时,标题是可见的.
当然我在其他页面(Full Width和404)中有标题这种问题.
此外,在索引页面中,它涵盖了一些轮播滑块.
信息:
bootstrap 2.3.2
请告诉我,如何在所有决议中修复它.
我正在使用带有bootstrap 3的平面UI主题.平面UI主题导航栏无法正常工作,并且很多人在github上发布了类似的问题.所以我决定只使用默认的BS3导航栏并编写我自己的代码(在另一个stackoverflow线程的帮助下)按照我想要的方式设置菜单样式.我在LESS作为覆盖css这样做.
问题是我无法弄清楚如何更改以下内容.
这是我正在使用的CSS:
/* navbar */
.navbar-default {
font-size: floor(@component-font-size-base * 1.067); // ~16px
border-radius: @border-radius-large;
border: none;
background-color: @brand-primary !important;
}
/* title */
.navbar-default .navbar-brand {
color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: @clouds;
}
.navbar-default .navbar-nav > li > a:hover {
color: @clouds;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: @clouds;
background-color: …我的顶部导航栏中有一个"注销"链接.我想知道我怎么能这样做,以便在我登录时,当我点击它并将我返回主页时它会将我注销.
具体来说,我在Laravel中对哪些文件进行了哪些更改？另外,我需要在视图中编写哪些代码(目前只包含HTML)才能触发此代码？
如何使用Android Studios更改系统NavBar并且颤动？
我认为它不在main.dart中,我需要浏览android系统文件,但是当我尝试编辑style.xml时,主题编辑器却不允许我编辑任何颜色？
任何帮助将不胜感激,我想有一个轻型导航栏与轻型底部AppBar.