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

When I shrink or contract the browser horizontally, my header kind of collapses. The links on the header get listed on top of each other from up to down and the header expands vertically down, hiding some of the content on the page. How do I make sure that the header's shape stays the same ? Here is my header HTML and my CSS stylesheet:

当我水平缩小或收缩浏览器时,我的标题会崩溃。标题上的链接从上到下列在彼此的顶部,标题垂直向下扩展,隐藏了页面上的一些内容。如何确保标题的形状保持不变?这是我的标题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>

1 个解决方案

#1

Try to use min width for the head div and to set it on value before collapsing to

尝试使用最小宽度作为head div并在折叠之前将其设置为值