我正在使用基本的bootstrap css而没有任何改动，我在ASP.NET MVC的Razor View中有以下html：
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!--<span class="icon-bar"></span>-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
@if (ViewBag.WidgetPages != null)
{
foreach (WidgetPage page in ViewBag.WidgetPages)
{
<li class="navbar-collapse"><div>
<a href="@Url.Action("Index", "WidgetPage")" class="navbar-link">@page.Title </a>
<a href="@Url.Action("Edit", "WidgetPage", new { id = page.Id })" class="navbar-link"><span class="glyphicon glyphicon-pencil" role="button"></span></a>
<a href="@Url.Action("Delete", "WidgetPage", new { id = page.Id })" class="navbar-link"><span class="glyphicon glyphicon-remove" role="button"></span></a>
</div>
</li>
}
}
<li><a href="@Url.Action("Create", "WidgetPage")">
<span class="glyphicon glyphicon-plus"></span>
</a>
</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</nav>
我的所有导航链接都正常工作 - 但是，导航栏的对齐方式与我期望和想要的一致。我最终得到的是http://puu.sh/kN0NJ/ea996c060b.png，而我希望得到的只是在同一行上对齐的所有项目。
更新：我的内容文件夹中有以下CSS：
.navbar.navbar-edit .navbar-nav li.edited .edit-link a {
color: #fff;
}
.navbar.navbar-edit .navbar-nav li.edited .edit-link a:hover {
color: #ccc;
}
.navbar.navbar-edit .navbar-nav li.edited a {
display: inline-block;
position: relative;
padding-right: 4px;
padding-left: 4px;
}
.navbar.navbar-edit .navbar-nav .edit-link{
padding-left: 4px;
padding-right: 4px;
}
@media (max-width: 767px){
.navbar.navbar-edit .navbar-nav li.edited a{
padding-left: 15px;
}
}
使用以下Razor View代码：
<nav class="navbar navbar-inverse navbar-edit navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!--<span class="icon-bar"></span>-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
@if (ViewBag.WidgetPages != null)
{
foreach (WidgetPage page in ViewBag.WidgetPages)
{
<li class="edited">
<a href="@Url.Action("Index","WidgetPage",new { id = @page.Id })" class="navbar-link">@page.Title</a>
<span class="edit-link"><a href="@Url.Action("Edit", "WidgetPage", new { id = @page.Id })" class="navbar-link">
<span class="glyphicon glyphicon-pencil" role="button"></span></a></span>
<span class="edit-link">
<a href="@Url.Action("Delete", "WidgetPage", new { id = @page.Id })" class="navbar-link">
<span class="glyphicon glyphicon-remove" role="button"></span>
</a>
</span>
</li>
}
}
<li>
<a href="@Url.Action("Create", "WidgetPage")">
<span class="glyphicon glyphicon-plus"></span>
</a>
</li>
</ul>
</div>
@Html.Partial("_LoginPartial")
</div>
</nav>
但我仍然以堆叠按钮结束。对于正在发生的事情，我真的很茫然。
答案 0 :(得分：2)
您的HTML结构已关闭（除非您尝试执行默认值以外的操作或可能是下拉列表？）。 Docs
您在一个int find_next_string(int *position, char str[], char * mem_start, int mem_size)
{
int found = 0;
char *temp2;
int k = 0;
int i=(*position+1);
char *temp ;
int temp3 = 0;
temp = (char *) calloc(mem_size, sizeof(char));
temp2 = (char *) calloc(mem_size, sizeof(char));
temp3=*position;
while(i!=temp3 && found==0 && k==0){
//for(j=0;i<mem_size;i++){
temp2=mem_start;
// j++;
temp=strstr(temp2, str);
if(strcmp(temp2, temp)==0){
found=1;
k=i;
}
//}
if(i==mem_size)
i=0;
else
i++;
}
if(found)
print_line(k, mem_start, mem_size);
// 1. update the location to the first character matching str
// 2. print the 16-byte word containing the string and repeat
// printing words until all characters in str are displayed
// 3. set found to 1
// if not found, do not change location and do not print
free(temp);
free(temp2);
return found;
}
元素中有navbar-collapse两次和多个href's。
<强>更新
您可以将自定义类添加到列表项中，其中包含图标以调整填充，然后使用媒体查询使其在移动视口中保持内联。
请参阅更新示例。
li/**BELOW NOT REQUIRED, ONLY FOR CONTEXT**/
.navbar.navbar-custom li.edit span {
color: #eee;
}
.navbar.navbar-custom li.edit span:hover {
color: #ccc;
}
/**ABOVE NOT REQUIRED, ONLY FOR CONTEXT**/
@media (min-width: 768px) {
.navbar.navbar-custom li.edit a {
padding-left: 4px;
padding-right: 4px;
}
}
@media (max-width: 767px) {
.navbar.navbar-custom li.edit {
display: table-cell;
}
.navbar.navbar-custom li.edit a {
padding-right: 4px;
}
}
/**UPDATED NAVBAR RULES - LOOP**/
/**BELOW NOT REQUIRED, ONLY FOR CONTEXT**/
.navbar.navbar-edit .navbar-nav li.edited .edit-link a {
color: #fff;
}
.navbar.navbar-edit .navbar-nav li.edited .edit-link a:hover {
color: #ccc;
}
/**ABOVE NOT REQUIRED, ONLY FOR CONTEXT**/
.navbar.navbar-edit .navbar-nav li.edited a {
display: inline-block;
position: relative;
padding-left: 4px;
padding-right: 4px;
}
.navbar.navbar-edit .navbar-nav .edit-link {
padding-left: 4px;
padding-right: 4px;
}
@media (max-width: 767px) {
.navbar.navbar-edit .navbar-nav li.edited a {
padding-left: 15px;
}
}