0

I have originally just wanted to pull the nav right only on xs and then started separating some css as well.

 <ul class="nav-normal hidden-xs pull-right">
     <li><a href="#" class="btn btn-sm btn-success">Edit</a></li>
     <li><a href="#" class="btn btn-sm btn-danger">Archive</a></li>
     <li><a href="#" class="btn btn-sm btn-info">Embed Code</a></li>
     <li><a href="#" class="btn btn-sm btn-warning">Customers</a></li>
 </ul>

 <ul class="nav-normal visible-xs">
     <li><a href="#" class="btn btn-sm btn-success">Edit</a></li>
     <li><a href="#" class="btn btn-sm btn-danger">Archive</a></li>
     <li><a href="#" class="btn btn-sm btn-info">Embed Code</a></li>
     <li><a href="#" class="btn btn-sm btn-warning">Customers</a></li>
 </ul>

 <style>
    .nav-normal.hidden-xs{
        padding: 25px 20px 0 20px;
    }

    .nav-normal.visible-xs{
        padding: 0px 20px 0 20px;
        li a{
            margin-top:25px
        }
    }
</style>

How can I have the same setup without duplicating content? Should I just do a server side include?

4

3 回答 3

1

Another option for you may be to use the col-push-* classes to only push the nav right on certain screen widths..

<ul class="nav-normal col-lg-2 col-lg-push-10">
     <li><a href="#" class="btn btn-sm btn-success">Edit</a></li>
     <li><a href="#" class="btn btn-sm btn-danger">Archive</a></li>
     <li><a href="#" class="btn btn-sm btn-info">Embed Code</a></li>
     <li><a href="#" class="btn btn-sm btn-warning">Customers</a></li>
</ul>

http://bootply.com/89005

于 2013-10-21T11:41:15.880 回答
0

You could make php decide what to send to a client. If(statement) { echo 'content1';}else{ echo 'content2';} this should work

于 2013-10-21T05:20:40.770 回答
0

Using LESS you can inject classes into CSS blocks. Combined with media queries, this can be something worth looking at, If you really need to avoid HTML duplication.

Although, I'd not recommand that, as this will make later changes (e.g.: where not only CSS differs) more difficult.

Also note that with duplicated content and visible-* classes specified it's obvious, what will be visible on which device even without reading CSS. This is a big plus, so I'd consider leaving your code as it is.

Example

HTML is very simple, without duplication and has id specified.

 <ul class="nav-normal" id="menu">
   <li><a href="#" class="btn btn-sm btn-success">Edit</a></li>
   <li><a href="#" class="btn btn-sm btn-danger">Archive</a></li>
   <li><a href="#" class="btn btn-sm btn-info">Embed Code</a></li>
   <li><a href="#" class="btn btn-sm btn-warning">Customers</a></li>
 </ul>

LESS file uses media queries and mixins:

@media (min-width: 768px) {
  #menu{
    padding: 25px 20px 0 20px;
    .pull-right;                 // mixin injected
  }
}

@media (max-width: 768px) {
  #menu{
    padding: 0px 20px 0 20px;
    li a {
        margin-top: 25px;
    }
  }
}
于 2013-10-21T10:08:24.317 回答