Question

我很难做我需要的事情。我需要的是图片显示的桌面，平板电脑，平板电脑和移动设备。 http://imgur.com/a/6TGeH

调整浏览器大小以查看它是如何以不同分辨率加载的。

我理解他们需要进行媒体查询。我很感激这方面的帮助。感谢

这是html

<header>
       <div class="container">
        <div class="row">
         <!--logo area-->
         <div class=" col-md-6 col-sm-4 col-xs-10">
            <div class="header-logo">
                <a href="index.html"><img src="http://i.imgsafe.org/3e1c7f5.png" width="200px" alt=""></a>
            </div>
         </div>
         <!--Header right side  area-->

         <div class="col-md-6 col-sm-8 col-xs-12">


            <div class="Greet">
             <a href="">
              <img src="http://i.imgsafe.org/a0196f1.png" alt="" ></a>
             </a>
             <a href="">
              <img src="http://i.imgsafe.org/d98c879.png" alt="" ></a>
             </a>

            </div>

           <div class="pro">
            <ul class="profile">
             <li class="notify"><a href="#">1</a></li>
             <li><a href="#"><i class="fa fa-bell-o"></i></a></li>
             <li role="presentation" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" href="#">Hi, Stephen</a>

              <ul class="dropdown-menu accountsuport">
               <a href="">Account </a>
               <a href=""> Support</a>
               <li><a href="">Log Out</a></li>
              </ul>
             </li>
             <li><a href="#">Subscribe</a></li>
            </ul>
           </div>


         </div>
        </div>
       </div>
        <!--end Hader right side  area-->
       </header>

这是CSS

header {
    border-bottom: 5px solid #F05051;
}
.container {
    background: none;
}



/*this is header area css*/


/*logo*/
.header-logo{}

.header-logo img{}

/* end logo*/


/*--Header mid side  area*/

.Greet {

   border: 1px blue;
   width: 300px;
   height: auto;
   margin-left: 15%;



}
.Greet img {
    float: left;
    display: inline-block;
    margin: 5% 5% 5% 5%;
}


/*--end Header middle side  area*/


/*header right side*/

.profile {
    list-style: outside none none;
    font-size: 1.1em;
    padding-top: 25px;
    text-align: right;

}

.notify {
    padding: 0px 4px !important;
    position: relative;
    background: #FF0 none repeat scroll 0% 0%;
    border-radius: 100%;
    border: 1px solid #EF5050;
    font-size: 11px;
    margin: -6px -9px !important;
}


/*.chrome .notify{
 padding: 0px 4px;
 top: 5px;
 position: absolute;
 left: 70px;
 background: yellow;
 border-radius: 100%;
 border: 1px solid #EF5050;
 font-size: 11px;
}*/

.profile li {
    float: left;
    margin: 5px;
}

.profile li:nth-child(4) {
    border-left: 2px solid #EF5050;
    padding: 0 8px;
}

.profile li a {
    text-decoration: none;
    color: #F05051;
}


.profile li a:hover {
    color: #CE4D4D ;
    text-decoration: underline;
}

Answer 1

HOLA，

好的，我抓住你的代码并进行一些修改。

首先，我在“标题右侧区域”中添加div，一个用于img，另一个用于用户等。

为什么？因为我们需要将这两个元素分开以便响应（precisly sm＆amp; xs）

然后我更喜欢使用col-XX-offset填充左侧或左侧边缘，它包含在Bootstrap上，使用它！（我知道，偏移使边缘左边，所以不要重复代码）

HTML：

<header>
    <div class="container">
        <div class="row">
            <!--logo area-->
            <div class="col-lg-3 col-lg-offset-0 col-md-3 col-md-offset-1 col-sm-5 col-xs-12">
                <div class="header-logo">
                    <a href="index.html">
                        <img src="http://i.imgsafe.org/3e1c7f5.png" width="200px" alt="">
                    </a>
                </div>
            </div>
            <!--Header right side  area-->
            <div class="col-lg-6 col-lg-offset-3 col-md-8 col-sm-6 col-xs-12">
                <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
                    <div class="Greet">
                        <a href="">
                            <img class="img-responsive" src="http://i.imgsafe.org/a0196f1.png" alt="">
                        </a>
                        <a href="">
                            <img class="img-responsive" src="http://i.imgsafe.org/d98c879.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-md-offset-0 col-sm-10 col-sm-offset-2 col-xs-12">
                    <ul class="pro profile clearfix">
                        <li class="notify"><a href="#">1</a></li>
                        <li><a href="#"><i class="fa fa-bell-o"></i></a></li>
                        <li role="presentation" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" href="#">Hi, Stephen</a>
                            <ul class="dropdown-menu accountsuport">
                                <a href="">Account </a>
                                <a href=""> Support</a>
                                <li><a href="">Log Out</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Subscribe</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--end Hader right side  area-->
</header>

CSS：

header {
    position: relative;
    padding-bottom: 20px;
    border-bottom: 5px solid #F05051;
}
.container {
    background: none;
    position: relative;
}
/*this is header area css*/
/*logo*/
.header-logo {
    margin: 0 auto;
    width: 200px;
}
/* end logo*/
/*--Header mid side  area*/
.Greet {
    margin: 0 auto;
    width: 215px;
}
.Greet a img {
    display: inline-block;
    margin: 5% 5% 5% auto;
}
.Greet a:last-of-type img { margin: 5% auto; }
/*--end Header middle side  area*/
/*header right side*/
.profile {
    padding: 25px 0 0 0;
    list-style: outside none none;
    font-size: 1.1em;
}
.notify {
    padding: 0px 4px !important;
    position: relative;
    background: #FF0 none repeat scroll 0% 0%;
    border-radius: 100%;
    border: 1px solid #EF5050;
    font-size: 11px;
    margin: -6px -9px !important;
}
/*.chrome .notify{
padding: 0px 4px;
top: 5px;
position: absolute;
left: 70px;
background: yellow;
border-radius: 100%;
border: 1px solid #EF5050;
font-size: 11px;
}*/
.profile li {
    float: left;
    margin: 5px;
}
.profile li:nth-child(4) {
    border-left: 2px solid #EF5050;
    padding: 0 8px;
}
.profile li a {
    text-decoration: none;
    color: #F05051;
}
.profile li a:hover {
    color: #CE4D4D ;
    text-decoration: underline;
}
.accountsuport a {
    margin: 0px 0px 0px 24px;
}
.accountsuport li {}
.accountsuport li a {
    margin: 0px;
}
.accountsuport li a:hover {
    background: none;
    color: #EF5050;
}
.dropdown-menu:before {
    height: 25px;
    width: 100%;
    display: block;
    position: absolute;
    left: -1px;
    top: -22px;
    content: "";
    background: url(../img/layer.jpg) no-repeat;
    margin-left: 0px;
}
.dropdown-menu {
    position: absolute;
    top: 40px;
    left: 15px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0px;
    margin: 2px 0px 0px;
    font-size: 14px;
    text-align: left;
    list-style: outside none none;
    background-color: #FFF;
    background-clip: padding-box;
    border: 3px solid #EF5050 !important;
    border-radius: 10px;
    box-shadow: 2px 0px -1px #EF5050;
}
/*--end Header right side  area*/
/*======================================
CONTENT CSS
========================================*/
.content {
    min-height: 450px;
}
@media only screen and (max-width: 992px) {
    .profile { padding-top: 10px; }
}
@media only screen and (max-width: 768px) {
    .profile {
        margin: 0 auto;
        padding-left: 30px;
        width: 260px;
    }
}

codepen：http://codepen.io/anon/pen/eJZxeg

（抱歉我的英语不好，你知道法语我们不好：D）

在响应时需要正确定位图像和链接

1 个答案: