Question

我原本只想在xs上向右拉导航，然后开始分离一些CSS。

 <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>

如何在不复制内容的情况下进行相同的设置？我应该只做一个服务器端包括吗？

Answer 1

您的另一个选择可能是使用col-push-*类只在某些屏幕宽度上推送导航..

<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

Answer 2

你可以让php决定发送给客户的内容。 if（statement）{echo'content1';} else {echo'content2';}这应该可行

Answer 3

使用LESS可以将类注入CSS块。结合媒体查询，这可能值得一看，如果你真的需要避免HTML重复。

虽然，我不推荐，因为这会使以后的更改（例如：不仅CSS不同）更难。

另请注意，对于重复的内容和指定的visible-*类，显而易见的是，在没有阅读CSS 的情况下哪些设备甚至可以显示。这是一个很大的优点，所以我会考虑保留你的代码。

示例

HTML非常简单，没有重复，并且已指定id。

<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文件使用媒体查询和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; } } }

有没有办法在没有重复内容的情况下拥有可见和隐藏的响应元素？

3 个答案: