부트 스트랩 navbar 붕괴가 올바르게 포맷되지 않았습니다.

다음은 부트 스트랩 Navbar에 대한 마크 업입니다. 이것은 코드 숨김에서 데이터베이스를 통해 생성됩니다. 문제는 오른쪽 정렬 된 항목이 나머지 브라우저 항목까지 푸시됩니다. 왼쪽 정렬 된 항목보다 작 으면 정상적으로 작동합니다.부트 스트랩 navbar 붕괴가 올바르게 포맷되지 않았습니다.

내가 뭘 잘못했는지 아이디어가 있습니까?

감사

enter image description here

마크 업

<div 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> 
      <a href="./" class="navbar-brand">Application name</a> 
     </div> 
     <div id="MainNavBar" class="navbar-collapse collapse navbar-responsive-collapse"> 


      <ul class="nav navbar-nav"> 
       <li><a title="Return to the home page" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl12&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Default&quot;, false, true))">Home</a></li> 
       <li><a title="Ways to contact us" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl14&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Contactus&quot;, false, true))">Contact</a></li> 
       <li class="dropdown"><a class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown" title="Latest News" href="#">News<b class="caret"></b></a><ul class="dropdown-menu"> 
        <li><a title="Latest News" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl20&quot;, &quot;&quot;, false, &quot;&quot;, &quot;News/News&quot;, false, true))">News</a></li> 
        <li><a title="View Events" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl22&quot;, &quot;&quot;, false, &quot;&quot;, &quot;events&quot;, false, true))">Events</a></li> 
       </ul> 
       </li> 
       <li><a title="Recommended Suppliers" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl24&quot;, &quot;&quot;, false, &quot;&quot;, &quot;external&quot;, false, true))">External</a></li> 
       <li class="dropdown"><a class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown" title="Property for sale" href="#">Property<b class="caret"></b></a><ul class="dropdown-menu"> 
        <li><a title="Property for sale" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl30&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Property/8&quot;, false, true))">For sale</a></li> 
        <li><a title="Property for lease" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl32&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Property/9&quot;, false, true))">For Lease</a></li> 
       </ul> 
       </li> 
       <li><a title="Local Information and services" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl34&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Content/10&quot;, false, true))">Local</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl37&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Secure/Landing/2&quot;, false, true))">Homeowners</a></li> 
       <li><a runat="server" href="https://oursite.com/hoa3_vendors/secure/landing/2" title="Login Section for Vendors Only">Vendors</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

enter image description here

=============================================

'이

 @media only screen and (min-width: 790px) { 
 
    .collapse { 
 
     display: block; 
 
    } 
 

 
    .navbar-header { 
 
     display: none; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 790px) { 
 
    .collapse { 
 
     display: none; 
 
    } 
 

 
    .navbar-header { 
 
     display: block; 
 
    } 
 
}

출처

2014-11-09 gchq

너무 많은 항목을 허용하는 솔루션 (그는 자신있게 말한다) 마지막이다. 메뉴 시스템, 부트 스트랩 및 대부분의 경우 링크가 너무 많아서 조정할시기를 결정할뿐만 아니라 특정 디자인을 수용하기 위해 메뉴 중단 점을 조정해야합니다. GetBootstrap.com 사용자 정의 프로그램은 변경할 수있는 변수가 적습니다. 현재 768px입니다. 992 또는 다른 값으로 변경할 수 있습니다. – Christina

안녕 크리스티나 - 답장을 보내 주셔서 감사합니다. 내가 가지고있는 주요 문제는 각 사이트에 대해 동적으로 생성되는 것처럼 탐색 막대에 표시 될 링크의 수를 모르는 것입니다. 이것을 즉시 조정할 수있는 수학 방정식이 있습니까? (미안하지만 주로 백 엔드 DB와 WPF를 WinForms에서 작성하므로 CSS는 여전히 검은 색 아트입니다 .-) – gchq

업데이트 - 기본적으로 webforms 프로젝트에는 .less 파일이 없습니다. Bootswatch에서 두 개를 다운로드하고 variables-free에서 grid-float-breakpoint를 찾았습니다. screen-sm-min으로 설정되었으며 지적한대로 768px입니다. 이 파일을 screen-md-min (992) 및 screen-lg-min (1200px)으로 변경했지만 효과가 없습니다. css 파일이 .less 파일에 어떻게 연결되어 있는지 전혀 모르지만 동일한 디렉터리 – gchq

Christina와 Michael에게 많은 감사를드립니다.

기존 CSS 값을 수정하면 메뉴의 동적 빌드로 인해 효과가 없었을 것입니다. 결국이 문제를 해결하는 가장 좋은 방법을 발견했습니다 (WidthSetting은 메뉴 항목을 만들 때 정의 됨). 지난 몇 메뉴 항목이 범위를 벗어나 있었다 축소 된 상태에서 - 작은 링크 값이 메뉴 항목은 메뉴 항목이 정말로 긴 왔을 때이 문제로 실행

Private Sub SetMenu(WidthSetting As Integer) 
    Try 
     Dim SB As New StringBuilder 
     SB.Append("$(document).ready(function(){ ") 
     SB.Append("$('body').append(") 
     SB.Append("""<style>") 
     SB.Append("@media only screen and (min-width: " & WidthSetting & "px) {") 
     SB.Append(".collapse {") 
     SB.Append("display: block;") 
     SB.Append(" }") 
     SB.Append(".navbar-header {") 
     SB.Append(" display: none;") 
     SB.Append(" }") 
     SB.Append("}") 
     SB.Append("@media only screen and (max-width: " & WidthSetting & "px) {") 
     SB.Append(".collapse {") 
     SB.Append("display: none;") 
     SB.Append(" }") 
     SB.Append(".navbar-header {") 
     SB.Append(" display: block;") 
     SB.Append(" }") 
     SB.Append("}") 
     SB.Append("</style>""); ") 
     SB.Append("}); ") 
     ScriptManager.RegisterStartupScript(Me, Me.GetType(), "SetMenu", SB.ToString, True) 
    Catch ex As Exception 
     Dim vError As New SendError 
     vError.MailError(497, PageName, ex) 
    End Try 
End Sub

를 실행할 필요가 없습니다.

다음은 오버 플로우

Private Sub SetMenu(WidthSetting As Integer) 
    Try 
     Dim SB As New StringBuilder 
     SB.Append("$(document).ready(function(){ ") 
     SB.Append("$('body').append(") 
     SB.Append("""<style>") 
     SB.Append("@media (max-width: " & WidthSetting & "px) { ") 
     SB.Append(".navbar-header { ") 
     SB.Append("float: none; ") 
     SB.Append("} ") 
     SB.Append(".navbar-left, .navbar-right { ") 
     SB.Append("float: none !important; ") 
     SB.Append("} ") 
     SB.Append(".navbar-toggle { ") 
     SB.Append("display: block; ") 
     SB.Append("} ") 
     SB.Append(".navbar-collapse { ") 
     SB.Append("border-top: 1px solid transparent; ") 
     SB.Append("box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); ") 
     SB.Append("} ") 
     SB.Append(".navbar-fixed-top { ") 
     SB.Append("top: 0; ") 
     SB.Append("border-width: 0 0 1px; ") 
     SB.Append("} ") 
     SB.Append(".navbar-collapse.collapse { ") 
     SB.Append("display: none !important; ") 
     SB.Append("} ") 
     SB.Append(".navbar-nav { ") 
     SB.Append("float: none !important; ") 
     SB.Append("margin-top: 7.5px; ") 
     SB.Append("} ") 
     SB.Append(".navbar-nav > li { ") 
     SB.Append("float: none; ") 
     SB.Append("} ") 
     SB.Append(".navbar-nav > li > a { ") 
     SB.Append("padding-top: 10px; ") 
     SB.Append("padding-bottom: 10px; ") 
     SB.Append("} ") 
     SB.Append(".collapse.in { ") 
     SB.Append("display: block !important; ") 
     SB.Append("} ") 
     SB.Append(".navbar-collapse.in { ") 
     SB.Append("overflow-y: auto !important; ") 
     SB.Append("} ") 
     SB.Append(".navbar-nav .open .dropdown-menu { ") 
     SB.Append("position: static; ") 
     SB.Append("float: none; ") 
     SB.Append("width: auto; ") 
     SB.Append("margin-top: 0; ") 
     SB.Append("background-color: transparent; ") 
     SB.Append("border: 0; ") 
     SB.Append("box-shadow: none; ") 
     SB.Append("} ") 
     SB.Append(".navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { ") 
     SB.Append("padding: 5px 15px 5px 25px; ") 
     SB.Append("} ") 
     SB.Append(".navbar-inverse .navbar-nav .open .dropdown-menu > li > a { ") 
     SB.Append("color: #999; ") 
     SB.Append("} ") 
     SB.Append(".navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, ") 
     SB.Append(".navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { ") 
     SB.Append("color: #fff; ") 
     SB.Append("background-color: transparent; ") 
     SB.Append("background-image: none; ") 
     SB.Append("} ") 
     SB.Append("} ") 
     SB.Append("</style>""); ") 
     SB.Append("}); ") 
     ScriptManager.RegisterStartupScript(Me, Me.GetType(), "SetMenu", SB.ToString, True) 

    Catch ex As Exception 
     Dim vError As New SendError 
     vError.MailError("481", PageName, ex) 
    End Try 
End Sub

출처

2014-11-10 21:44:30 gchq

좋은 직장! 나는 문자열 빌더가 내가 좋아하는 내가 그것을 좋아한다라고 생각한다! –

당신이 부트 스트랩 문서를 읽을나요 동적 필요가 있겠습니까?

귀하의 문제는 주로 C라고 생각합니다. Getbootstrap.com에서

넘쳐 내용 :
부트 스트랩이 당신의 메뉴 바의 요구의 내용이, 두 번째 행에 콘텐츠 배치 문제로 실행하는 방법 많은 공간을 알고하지 않기 때문에. 이 문제를 해결하려면 다음을 수행 할 수 있습니다.

가) 네비게이션 항목의 양 또는 너비를 줄입니다.

B) 반응 형 유틸리티 클래스를 사용하여 특정 화면 크기에서 특정 탐색 표시 줄 항목을 숨 깁니다.

C) 내비게이션 막대가 접힌 모드와 가로 모드 사이를 전환하는 지점을 변경합니다. @ grid-float-breakpoint 변수를 사용자 정의하거나 자체 미디어 쿼리를 추가하십시오.

출처

2014-11-09 17:29:42

답장을 보내 주셔서 감사합니다 - C 항목의 예를 들어 주시겠습니까? – gchq

CSS 파일을보고 미디어 쿼리를 살펴보아야합니다. 패딩 또는 여백이 두 번째 크기로 바뀌면 여백 또는 여백을 변경하십시오. 어렵지 않아야합니다. 페이지로 이동하여 F12 키를 누를 수도 있습니다. 그런 다음 CSS를 변경하여 다양한 크기로 어떻게 변하는 지 확인하십시오. –

마스터 페이지의 머리글 태그에서 스타일을 재정의 할 수 있습니까? – gchq

부트 스트랩 navbar 붕괴가 올바르게 포맷되지 않았습니다.

답변

관련 문제