2016-08-14 19 views
0

看來我擁有了正確的地方。Bootstrap導航欄不會在智能手機上崩潰

在頭上。沒有視meta標籤(我試過,但沒有運氣)

<title>My Title for Webpage</title> 

<link href="css/bootstrap.min.css" rel="stylesheet" /> 

右鍵關閉標籤

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
</body> 

這上面是導航欄HTML

<div class="navbar navbar-default navbar-fixed-top" style="border: 1px solid red; 
    padding-left: 20px; padding-right: 30px;"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span 
       class="icon-bar"></span><span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><span class="title">Portland Dancing</span></a> 
    </div> 
    <div class="navbar-collapse collapse" style="max-height: 100%;"> 
     <ul class="nav navbar-nav navbar-left"> 
      <li> 
       <asp:DropDownList ID="ddlChoose" runat="server" AutoPostBack="true" CssClass="form-control" 
        EnableViewState="false" DataTextField="DanceStyle" DataValueField="DanceStyle"> 
       </asp:DropDownList> 
      </li> 
      <li> 
       <asp:DropDownList ID="ddlChooseDateRanges" runat="Server" AutoPostBack="true" CssClass="form-control" 
        OnSelectedIndexChanged="DateRangePullDownHandler" EnableViewState="false"> 
        <asp:ListItem Value="All Days">All Days</asp:ListItem> 
        <asp:ListItem Value="Christmas">Christmas</asp:ListItem> 
        <asp:ListItem Value="New Years Eve">New Year's Eve</asp:ListItem> 
        <asp:ListItem Value="Today">Today</asp:ListItem> 
        <asp:ListItem Value="Tomorrow">Tomorrow</asp:ListItem> 
        <asp:ListItem Value="Today Tomorrow">Today Tomorrow</asp:ListItem> 
        <asp:ListItem Value="This Weekend">This Weekend</asp:ListItem> 
        <asp:ListItem Value="Next Weekend">Next Weekend</asp:ListItem> 
        <asp:ListItem Value="This Week">This Week</asp:ListItem> 
        <asp:ListItem Value="Fridays">Fridays</asp:ListItem> 
        <asp:ListItem Value="Saturdays">Saturdays</asp:ListItem> 
        <asp:ListItem Value="Sundays">Sundays</asp:ListItem> 
        <asp:ListItem Value="Mondays">Mondays</asp:ListItem> 
        <asp:ListItem Value="Tuesdays">Tuesdays</asp:ListItem> 
        <asp:ListItem Value="Wednesdays">Wednesdays</asp:ListItem> 
        <asp:ListItem Value="Thursdays">Thursdays</asp:ListItem> 
        <asp:ListItem Value="Before 1pm">Before 1pm</asp:ListItem> 
        <asp:ListItem Value="Before 3pm">Before 3pm</asp:ListItem> 
        <asp:ListItem Value="Before 6pm">Before 6pm</asp:ListItem> 
        <asp:ListItem Value="Before 9pm">Before 9pm</asp:ListItem> 
       </asp:DropDownList> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <asp:LinkButton ID="lnkPrint" Style="margin-bottom: 5px; padding: 6px 0px;" CssClass="form-control" 
        CausesValidation="False" BackColor="#f6f2dc" ForeColor="Black" runat="server" 
        EnableViewState="false" title="Make your choices with the checkboxes and then Print them">Print</asp:LinkButton> 
      </li> 
      <li> 
       <asp:LinkButton ID="lnkEmail" Style="margin-bottom: 5px; padding: 6px 0px;" CssClass="form-control" 
        runat="server" CausesValidation="False" BackColor="#f6f2dc" ForeColor="Black" 
        EnableViewState="false" title="Make your choices with the checkboxes and then Email them"> 
      Email 
       </asp:LinkButton></li> 
      <li> 
       <asp:DropDownList ID="ddlAgesPrice" runat="Server" AutoPostBack="true" OnSelectedIndexChanged="AgesPricePulldownHandler" 
        CssClass="form-control" EnableViewState="false" Style="text-align: center;"> 
        <asp:ListItem Value="Ages, Price" Enabled="false">(Ages, Price)</asp:ListItem> 
        <asp:ListItem Value="All, All">All, All</asp:ListItem> 
        <asp:ListItem Value="All, Free">All, Free</asp:ListItem> 
        <asp:ListItem Value="Under 21, All">Under 21, All</asp:ListItem> 
        <asp:ListItem Value="Under 21, Free">Under 21, Free</asp:ListItem> 
        <asp:ListItem Value="Over 50, All">Over 50, All</asp:ListItem> 
        <asp:ListItem Value="Over 50, Free">Over 50, Free</asp:ListItem> 
       </asp:DropDownList> 
      </li> 
      <li> 
       <asp:CheckBox ID="chkInflate" CssClass="form-control" EnableViewState="True" AutoPostBack="True" 
        BackColor="#f6f2dc" ForeColor="Black" Style="margin-bottom: 5px;" runat="Server" 
        ToolTip="Check/Uncheck the box to have all the names expand with more info on this web page. Or go over and click on an event name to pop up a whole bunch of information."> 
       </asp:CheckBox></li> 
      <li> 
      <a href="emailus.aspx" class="form-control" style="color: black; background-color: #f6f2dc; margin-bottom: 7px; font-size: 14px; padding: 6px 0px;" target="_blank" title="Do you have a dance to list? Problem with a listing? Advice for us? Click here to email us. Classes and workshops are in a different area: Learn Stuff"> 
       Contact</a> 
      </li> 
      <li> 
      <a href="learn.aspx" target="_blank" class="form-control" style="font-weight: bold; 
       margin-bottom: 7px; color: Red; background-color: #f6f2dc; font-size: 14px; padding: 6px 0px;" 
       title="You must click here to see the Lessons, Worksops, and Gatherings, Private Lessons."> 
       Lessons</a> 
      </li> 
     </ul> 
    </div> 
</div> 

這裏是使用Chrome開發人員工具在iPhone 5上看起來的樣子。這與我的iphone6plus相同。應當倒塌,顯示了右切換按鈕:

Navbar collapsed to iphone5 size

這裏是使用Chrome開發人員工具定期瀏覽器的大小(筆記本電腦)。由於設計:

Regular/Laptop browser size

什麼是有趣的,有我困惑的是,我可以在窗口和切換按鈕的右側拖動縮小我的Chrome瀏覽器窗口顯示了和作品。這表明我正在做的很正確。 。 。直到我試着在我的iPhone6plus

Window shrink navbar

我也崩潰了我的李標籤,並採取了絲網印刷,努力看到事情做得更好:

enter image description here

+0

嘗試將視:''。 – Karin

+0

請將完整的源代碼與您提供的代碼片段一起發佈,但找到問題相當困難。 – Derek

+0

@Karin你是對的!嘿,我在觀看視頻之前遇到了問題。當我編輯這個問題時,你回答了它。那個人很快。如果它是一條蛇,它會咬我。然而。 。 。我需要上傳並在我的smartass手機上打開它。請將其作爲答案,以便我可以接受它,如果它在我的手機上。謝謝 – JustJohn

回答

0

我想你錯過了這個<meta name="viewport" content="width=device-width, initial-scale=1">


 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="navbar navbar-default navbar-fixed-top" style="border: 1px solid red; 
 
    padding-left: 20px; padding-right: 30px;"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span 
 
       class="icon-bar"></span><span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#"><span class="title">Portland Dancing</span></a> 
 
    </div> 
 
    <div class="navbar-collapse collapse" style="max-height: 100%;"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
      <li> 
 
       <asp:DropDownList ID="ddlChoose" runat="server" AutoPostBack="true" CssClass="form-control" 
 
        EnableViewState="false" DataTextField="DanceStyle" DataValueField="DanceStyle"> 
 
       </asp:DropDownList> 
 
      </li> 
 
      <li> 
 
       <asp:DropDownList ID="ddlChooseDateRanges" runat="Server" AutoPostBack="true" CssClass="form-control" 
 
        OnSelectedIndexChanged="DateRangePullDownHandler" EnableViewState="false"> 
 
        <asp:ListItem Value="All Days">All Days</asp:ListItem> 
 
        <asp:ListItem Value="Christmas">Christmas</asp:ListItem> 
 
        <asp:ListItem Value="New Years Eve">New Year's Eve</asp:ListItem> 
 
        <asp:ListItem Value="Today">Today</asp:ListItem> 
 
        <asp:ListItem Value="Tomorrow">Tomorrow</asp:ListItem> 
 
        <asp:ListItem Value="Today Tomorrow">Today Tomorrow</asp:ListItem> 
 
        <asp:ListItem Value="This Weekend">This Weekend</asp:ListItem> 
 
        <asp:ListItem Value="Next Weekend">Next Weekend</asp:ListItem> 
 
        <asp:ListItem Value="This Week">This Week</asp:ListItem> 
 
        <asp:ListItem Value="Fridays">Fridays</asp:ListItem> 
 
        <asp:ListItem Value="Saturdays">Saturdays</asp:ListItem> 
 
        <asp:ListItem Value="Sundays">Sundays</asp:ListItem> 
 
        <asp:ListItem Value="Mondays">Mondays</asp:ListItem> 
 
        <asp:ListItem Value="Tuesdays">Tuesdays</asp:ListItem> 
 
        <asp:ListItem Value="Wednesdays">Wednesdays</asp:ListItem> 
 
        <asp:ListItem Value="Thursdays">Thursdays</asp:ListItem> 
 
        <asp:ListItem Value="Before 1pm">Before 1pm</asp:ListItem> 
 
        <asp:ListItem Value="Before 3pm">Before 3pm</asp:ListItem> 
 
        <asp:ListItem Value="Before 6pm">Before 6pm</asp:ListItem> 
 
        <asp:ListItem Value="Before 9pm">Before 9pm</asp:ListItem> 
 
       </asp:DropDownList> 
 
      </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li> 
 
       <asp:LinkButton ID="lnkPrint" Style="margin-bottom: 5px; padding: 6px 0px;" CssClass="form-control" 
 
        CausesValidation="False" BackColor="#f6f2dc" ForeColor="Black" runat="server" 
 
        EnableViewState="false" title="Make your choices with the checkboxes and then Print them">Print</asp:LinkButton> 
 
      </li> 
 
      <li> 
 
       <asp:LinkButton ID="lnkEmail" Style="margin-bottom: 5px; padding: 6px 0px;" CssClass="form-control" 
 
        runat="server" CausesValidation="False" BackColor="#f6f2dc" ForeColor="Black" 
 
        EnableViewState="false" title="Make your choices with the checkboxes and then Email them"> 
 
      Email 
 
       </asp:LinkButton></li> 
 
      <li> 
 
       <asp:DropDownList ID="ddlAgesPrice" runat="Server" AutoPostBack="true" OnSelectedIndexChanged="AgesPricePulldownHandler" 
 
        CssClass="form-control" EnableViewState="false" Style="text-align: center;"> 
 
        <asp:ListItem Value="Ages, Price" Enabled="false">(Ages, Price)</asp:ListItem> 
 
        <asp:ListItem Value="All, All">All, All</asp:ListItem> 
 
        <asp:ListItem Value="All, Free">All, Free</asp:ListItem> 
 
        <asp:ListItem Value="Under 21, All">Under 21, All</asp:ListItem> 
 
        <asp:ListItem Value="Under 21, Free">Under 21, Free</asp:ListItem> 
 
        <asp:ListItem Value="Over 50, All">Over 50, All</asp:ListItem> 
 
        <asp:ListItem Value="Over 50, Free">Over 50, Free</asp:ListItem> 
 
       </asp:DropDownList> 
 
      </li> 
 
      <li> 
 
       <asp:CheckBox ID="chkInflate" CssClass="form-control" EnableViewState="True" AutoPostBack="True" 
 
        BackColor="#f6f2dc" ForeColor="Black" Style="margin-bottom: 5px;" runat="Server" 
 
        ToolTip="Check/Uncheck the box to have all the names expand with more info on this web page. Or go over and click on an event name to pop up a whole bunch of information."> 
 
       </asp:CheckBox></li> 
 
      <li> 
 
      <a href="emailus.aspx" class="form-control" style="color: black; background-color: #f6f2dc; margin-bottom: 7px; font-size: 14px; padding: 6px 0px;" target="_blank" title="Do you have a dance to list? Problem with a listing? Advice for us? Click here to email us. Classes and workshops are in a different area: Learn Stuff"> 
 
       Contact</a> 
 
      </li> 
 
      <li> 
 
      <a href="learn.aspx" target="_blank" class="form-control" style="font-weight: bold; 
 
       margin-bottom: 7px; color: Red; background-color: #f6f2dc; font-size: 14px; padding: 6px 0px;" 
 
       title="You must click here to see the Lessons, Worksops, and Gatherings, Private Lessons."> 
 
       Lessons</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

+0

來自原帖*「在頭部,沒有視口元標記(我試過但沒有運氣)」* – Derek

+0

@頭部在雲中,我向上投票,因爲在編輯問題時添加有關視口的評論時,我。謝謝你這麼快的迴應,不要放棄我。 – JustJohn

2

正如我在評論中提及,將<meta name="viewport" content="width=device-width, initial-scale=1.0">head部分應該解決您的問題。可以進一步瞭解視口中here,但外賣是:

寬度=設備寬度部分設置頁面的寬度跟隨設備的 屏幕寬度(這將取決於該設備的不同而不同)。

當瀏覽器第一次加載頁面 時,initial-scale = 1.0部分設置初始縮放級別。

所以,這讓手機知道不壓扁你的網頁,而且它的設計充分考慮移動縮放:)

+0

在爲期兩天的工作中,我遇到了所有這些解釋。謝謝谷歌和堆棧溢出。我認爲這是搞亂了我縮小的屏幕的身體部分,這是另一個睡覺時間的故事。一次只需一小步。謝謝@Karin。 。人,試圖使一箇舊的asp.net webforms網站響應很難。細節決定成敗。我想我可以去看一個樣板引導模板的「瘦骨頭」。 Boot Strap的縮寫是。 。 。 。 。 。 – JustJohn