Question

我已经采取了两个div，说“Panel1”和“Panel2”，其中Panel1具有属性附加（用HTML进行硬编码，因此必须强制应用位置：相对于其他屏幕尺寸）附加到HTML中使用col-md -3和Panel2是col-md-8。

现在问题是我必须为我的Panel2应用大约25％的左值来按照Panel1对齐，否则它会低于它但是这样做会破坏响应性。该设计打破了所有其他屏幕尺寸，只是违反了使用bootstrap进行响应式设计的目的。（我必须使用原始设计的页眉和页脚，并根据它创建一个仪表板。）

如果不再手动编写和管理屏幕尺寸，设计的方法是什么，所以我使用的只是bootstrap，设计应该在低rez屏幕上工作。

HTML：

<!-- DASHBOARD SECTION STARTS (Bootstrap Components) -->
    <div class="container-fuild dash-panel">
        <div class="row">

            <div class="col-md-3 left-panel" data-spy="affix">
                <ul class="dash-items">
                    <li class="dash-li"><a class="list-links" href="index.html"><!-- <img class="profile-image" src="../images/ad.jpg" alt="">&nbsp;  -->Profile</a></li>
                    <li class="dash-li"><a class="list-links" href="my-ads.html">My Advertisements</a></li>
                    <li class="dash-li"><a class="list-links" href="fav-ads.html">My Favouraite Advertisments</a></li>
                    <li class="dash-li"><a class="list-links" href="reported-ads.html">Reported Advertisments</a></li>
                </ul>
            </div>

            <div class="col-md-8 right-panel">
                <img class="profile-image" src="../images/ad.jpg" alt="">

                <div class="profile-info">
                    <p class="profile-detail-para"><label>Name:&nbsp;</label>John Doe</p>
                    <p class="profile-detail-para"><label>Email:&nbsp;</label>doejohn@xyz.com</p>
                    <p class="profile-detail-para"><label>Summary:&nbsp;</label><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt natus dicta assumenda, velit quae officia accusantium explicabo similique possimus veniam illo, dolor delectus saepe quis in eveniet voluptatem adipisci, repudiandae.</span><span>Veritatis at saepe labore explicabo, voluptas asperiores unde accusantium tempore harum, numquam porro doloremque aliquid assumenda. Maiores voluptates aliquid dicta autem commodi eveniet voluptas exercitationem ut, hic laborum laudantium veritatis.</span></p>

                    <p class="profile-detail-para">
                        <a class="profile-edit" href="edit-info.html">Edit info&nbsp;<i class="fa fa-edit"></i></a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- DASHBOARD SECTION ENDS -->

重写CSS

  /* Contains custom css for dashboard */

 @import url(https://fonts.googleapis.com/css?family=Montserrat|Dosis);
 @import url(https://fonts.googleapis.com/css?family=Open+Sans);


body{
    background: #1D1D1D none repeat scroll 0px 0px;
}

.dash-panel{
    padding-top: 1%;
    padding-bottom: 1%;
    height: 480px;
}

.left-panel{
    background: #000;
    margin-right: 4%;
    height: 100%;
    left: 5%;
}

.dash-items{
    list-style: none;
    margin-left: -10%;
}

.dash-li{
    margin-top: 2px;
    padding: 3%;
}

.dash-li:hover{
    background: #3F3030;
}

.list-links{
    text-decoration: none !important;
    color: #F0B101;
    font-family: 'Montserrat', sans-serif;
}

.list-links-profile{
    text-decoration: none !important;
    color: #F0B101;
    font-family: 'Montserrat', sans-serif;  
    margin-left: -20%;
}

.right-panel{
    background: #000;
    padding: 2%;
    margin-left: 32.4%;
}

.right-panel-2{
    background: #000;
    padding: 2%;
    left: 24%;  
}

.profile-image{
    max-width: 100%;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    float: left;
}

.profile-info{
    float: left;
    margin-left: 2%;
    font-family: 'Dosis', sans-serif;
    background: #1D1D1D;
    width: 80%;
    padding: 2%;
}

.profile-detail-para{
    margin-bottom: 2%;
}

.set-BG{
    background: #1D1D1D;
}

.listing-image{
    width: 180px;
}

.profile-edit{
    background: #D7DFE6;
    padding: 1%;
    color: #000;
}

/* Status */
.pub{
    color: #369536;
}

.pen{
    color: #D13D3D;
}
/* Status Ends */

.edit-profile{
    font-family: 'Open Sans', sans-serif;
    padding: 2%;
}

.text-area{
    background-color: transparent;
    border: 1px solid #464646;
    border-radius: none !important;
    color: #B8B8B8;
    height: 40px;
    padding: 5px 10px;
    width: 100%;
    box-shadow: none;
}

input[type=file]{
    background: #000;
}

.submit-btn{
    width: 15%; 
    background: #000;
    border: 1px solid #E1B101;
}

@media (max-width: 768px) {
  .left-panel  {
    position: relative;
    left: 1.5%;
    width: 34%;
    float: left;
  }
  .right-panel{
    left: 0%;
    float: right;
  }

  .right-panel-2{
    left: 0%;
  }

  .profile-info{
    left: 0%;
  }
}

@media (max-width: 480px) {
  .left-panel  {
    position: relative;
    left: 1.5%;
    float: none;
  }
  .right-panel{
    left: 0%;
    float: none;
  }

  .right-panel-2{
    left: 0%;
  }

  .profile-info{
    left: 0%;
  }
}

/* @media (max-width: 900px) {
  .left-panel  {
    position: relative;
    left: 1.5%;
  }
  .right-panel{
    left: 0%;
  }

  .right-panel-2{
    left: 0%;
  }

  .profile-info{
    left: 0%;
  }
} */

固定引导边栏

0 个答案: