css - 当我减小浏览器宽度时，如何确保我的标题不会改变？

Question

当我水平缩小或收缩浏览器时，我的标题有点崩溃。标题上的链接从上到下彼此重叠列出，标题垂直向下扩展，隐藏页面上的一些内容。如何确保页眉的形状保持不变？这是我的 header HTML 和我的 CSS 样式表:

@import "bootstrap-sprockets";
@import "bootstrap";

/* mixins, variables */

/* universal */

html {
  overflow-y: scroll;
}
body {
  padding-top: 60px;
  position: relative;
}
section {
  overflow: auto;
}
textarea {
  resize: vertical;
}
.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}
/* typography */

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
}
h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}
h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: #3BB9FF;
}
p {
  font-size: 1.1em;
  line-height: 1.7em;
}
/* 
    footer{
    background-color: #222;
    div ul li{
    display:block;
    vertical-align: top;
    width: 50%;
    float: left;
    }
    }
    */

@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* miscellaneous */

.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box_sizing;
}
/* forms */

input,
textarea,
select,
.uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}
input {
  height: auto !important;
}
#error_explanation {
  color: red;
  ul {
    color: red;
    margin: 0 0 30px 0;
  }
}
.field_with_errors {
  @extend .has-error;
  .form-control {
    color: $state-danger-text;
  }
}
/* articles */

.container1 {
  opacity: 0.75;
  border: 1px solid #000000;
  border-radius: 10px;
  padding: 30px 75px 75px 100px;
  overflow: scroll;
}
.container1 p img {
  float: left;
  margin-top: 9px;
  margin-right: 15px;
  margin-bottom: 15px;
}
.container2 {
  position: fixed;
  padding: 0px 75px 20px 100px;
  clear: both;
  background-color: #FFFFFF;
  /*#F8F8F8;*/
  border-radius: 5px;
  overflow: scroll;
}
footer {
  clear: both;
  padding: 30px 75px 75px 100px;
}
/*Search*/

.search {
  padding: 6px 15px 6px 30px;
  margin: 3px;
}
.lighter,
.light,
.dark {
  width: 95%;
  height: 50px;
}
.rounded {
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
}

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <a class="navbar-brand" , href="#">KREDIBLE</a>
    <nav>
      <ul class="nav navbar-nav pull-left">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             MENU <b class="caret"></b>
            </a>
          <ul class="dropdown-menu">
            <li>
              <%=l ink_to "Home", root_path %>
            </li>
            <li>
              <%=l ink_to "About Us", about_path %>
            </li>
            <li>
              <%=l ink_to "Contact Us", contact_path %>
            </li>
            <li>
              <%=l ink_to "Subscribe", '#' %>
            </li>
          </ul>
        </li>
        <li>
          <%=l ink_to "Tags", tags_path %>
        </li>
        <% if logged_in? %>
          <li>
            <%=l ink_to "Log out", logout_path %>
          </li>
          <% else %>
            <li>
              <%=l ink_to "Log in", login_path%>
            </li>
            <%end%>
      </ul>
      <ul class="nav navbar-nav pull-right">
        <%=l ink_to "Subscribe", '#' %>
      </ul>
    </nav>
  </div>
</header>

Answer 1

尝试为头部 div 使用最小宽度，并在折叠之前将其设置为