<p dir="auto">Related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="6951266" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/5180" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/5180/hovercard" href="https://github.com/twbs/bootstrap/issues/5180">#5180</a></p>
<blockquote>
<p dir="auto">Pills with dropdowns and button dropdowns: On my iPhone the dropdown opens OK, but touching a menu item causes it to close - not link to another page.</p>
</blockquote>
<p dir="auto">Wanted to ask if this will be fixed in 2.1.2, otherwise I'll work around it? My testing in 2.1.2-wip shows there is still a problem.</p>
<p dir="auto">Thanks a lot!<br>
Lee</p>
<p dir="auto">Well, every author knows about she's baby that it is not perfect... But please let me identify few (high level) issues with current approach in Bootstrap, which could be quite easily fixed.</p>
<ol dir="auto">
<li>HTML is for semantic elements, and CSS is for visual formatting. It is well known for everyone... But when I was looking for best CSS framework over there, I found following answer on Stackoverflow:<br>
<a href="http://stackoverflow.com/questions/203069/what-is-the-best-css-framework-and-are-they-worth-the-effort" rel="nofollow">http://stackoverflow.com/questions/203069/what-is-the-best-css-framework-and-are-they-worth-the-effort</a></li>
</ol>
<p dir="auto">Accepted answer has a good merits, so I was starting thinking how to solve it cleanly...</p>
<p dir="auto">My conclusion was that using Less preprocessor it is quite easy. It's enough to have a whole framework as mixins and it is possible to make your own *.less, which will just import visual elements from bootstrap. Then no visual elements need to migrate into HTML.</p>
<p dir="auto">E.g.</p>
<h2 dir="auto">my.html</h2>
<div dir="auto"></div>
## my.less
<p dir="auto">.menu {<br>
.nav;<br>
.nav-pills;<br>
.nav-stackable;<br>
}</p>
<p dir="auto">instead of writing in HTML:</p>
<div dir="auto"></div>
<p dir="auto">Above solution partially works. But only partially. Currently problem is that Bootstrap is not defined properly to mix classes into user LESS files. In above example there is e.g. error importing .nav-stackable. It is because .nav-stackable is not defined in "nested way" but traditionally:</p>
<p dir="auto">// Stacked tabs and pills<br>
.nav-stacked &gt; li {<br>
float: none;<br>
}<br>
.nav-stacked &gt; li &gt; a {<br>
margin-right: 0; // no need for the gap between nav items<br>
}</p>
<p dir="auto">Because of that you can not mixin this class into your own *.less stylesheet (there is no simple .nav-stackable class - just descendants).</p>
<p dir="auto">If it works it will be possible to completely get rid of visual elements from HTML, as you can always use your own having semantic meaning in your *.less file. There will be still problems with other selectors basing on .nav-stackable (which will be effectively renamed after mixin into client code), but I think it is a way to go nevertheless. Changing even part of Bootstrap can much improve situation.</p>
<ol dir="auto">
<li>It is another positive consequence of point 1.</li>
</ol>
<p dir="auto">Currently I am trying to create Joomla template using Bootstrap. Unfortunately it is not possible to get it right. The problem is that Joomla uses it's own tags in HTML, which are expanded into other HTML.</p>
<p dir="auto">E.g.<br>
&lt;jdoc:include type="modules" name="menu" /&gt;</p>
<p dir="auto">is expanded into:</p>
<ul dir="auto">
<li><a href="#">Home</a></li>
<li><a href="#">test 1</a></li>
</ul>
<p dir="auto">and now I can not apply nav styles to ul list! It is generated by Joomla and I can not change it.</p>
<p dir="auto">With Bootstrap defined as mixins it would be possible to make it in own *.less file as presented above:</p>
<p dir="auto">.menu {<br>
.nav;<br>
.nav-pills;<br>
.nav-stackable;<br>
}</p>
<p dir="auto">After these changes code in less files and in user HTML should be much cleaner and just better.</p>