使用Twitter Bootstrap 3进行内联响应式菜单

时间：2017-01-31 14:50:50

标签： html css twitter-bootstrap twitter-bootstrap-3 responsive-design

我正在尝试使用以下元素在我的应用中创建响应式标头：

  • 徽标（<img>）
  • 搜索栏（<input>）
  • 一个链接（<a>）
  • 两个方框（<div>）

元素位置取决于屏幕尺寸：

中画面（md-*）

enter image description here

小屏幕（sm-*）

enter image description here

超小屏幕（xs-*）

enter image description here

我设法创建了这些布局中的每一个，但没有使用Bootstrap的响应类......你能帮助我吗？

以下是我用来制作此示例的简单代码：

<div class="container">
  <div class="row vertical-aligned">
    <!-- Logo -->
    <div class="col-md-2 col-sm-12 col-xs-12">
      <img class="logo" src="http://pngimg.com/upload/cocacola_PNG14.png"/>
    </div>
    <!-- Search bar -->
    <div class="col-md-7 col-sm-6 col-xs-12">
      <div class="input-group search-width">
        <input type="text" class="form-control"/>
        <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-search"></span>
        </span>
      </div>
      <a>Launch advanced research...</a>
    </div>
    <!-- Nav boxes -->
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="nav-button">Profil</div>
      <div class="nav-button">Settings</div>
    </div>
  </div>
</div>

JSFiddle here

2 个答案:

答案 0 :(得分：2)

我解决了这个问题，我发现了2个问题。

第一个带有你的md屏幕，输入字段和段落不会保持内联，因为float属性，这可以通过将.input-group类的css编辑为float left来解决。小屏幕的第二个问题是，div不会叠加在100％宽度上，因为你设置了css属性display：flex和center，我为窗口大小创建了一个媒体查询（＆lt; 768px） ）将这些div显示为内联块。请评论任何其他帮助或问题，以下代码应该正常工作。

更新 - 解决md和sm尺寸的附加要求：

对于第一个问题，我将padding top添加到id = link，在仅定位md设备的媒体查询中，对于媒体查询的第二个问题，我编辑了具有位置相对和左/顶属性的div的位置。

由于 Fabrizio Bertoglio 

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="main.css" rel="stylesheet" />
    </head>

    <body>
<div class="container">
  <div class="row vertical-aligned">
    <!-- Logo -->
    <div class="col-md-2 col-sm-12 col-xs-12">
      <img class="logo" src="http://pngimg.com/upload/cocacola_PNG14.png"/>
    </div>
    <!-- Search bar -->
    <div class="col-md-7 col-sm-12 col-xs-12">
        <div class="row">
            <div class="input-group col-md-6">
                <input type="text" class="form-control"/>
                <span class="input-group-addon"> 
                  <span class="glyphicon glyphicon-search"></span>
                </span>
            </div>
            <div class="col-md-4" id="link">
                <a>Launch advanced research...</a>
            </div>
        </div>
    </div>
    <!-- Nav buttons -->
    <div class="col-md-3 col-sm-12 col-xs-12" id="boxes">
      <div class="nav-button">Profil</div>
      <div class="nav-button">Settings</div>
    </div>
  </div>
</div>

Css代码

    </body>
</html>


.vertical-aligned {
    display: flex;
    align-items: center; 
}

.logo {
  width: 100%;
  display: block;
}

.nav-button {
  height: 70px;
  width: 80px;
  border: solid 1px black;
  display: inline-block;
}

.input-group {
    float: left !important;
}


@media (min-width: 992px) { 
    #link {
        padding-top: 6px;
    }
}

@media (max-width: 768px) { 
    .vertical-aligned {
        display: inline-block;
    }
    #boxes {
        max-width: 300px;
        position: relative;
        left: 100%;
        transform: translateX(-179px);
        top: -5%;
    }

    a {
        position: relative;
        top: 49px;
    }
}

答案 1 :(得分：-1)

我希望这个答案可以帮到你。 您可以使用@media管理不同布局中的每个元素大小， 例如，在笔记本电脑布局上：

@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 

//your css here
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
//your css code here
}

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

https://www.youtube.com/watch?v=t526Lt_O7zo

相关问题
最新问题