There was a problem, but there is not enough knowledge yet and I can’t find the answer. Blocks as links, links have a title. There are absolutely no indents between the blocks, so if the title appears on block 1, then when switching to block 2, it will change, but hang on block 1.

How to make this title disappear when switching from block to block? Or indent how to do? Change CSS bootstrap-a or is there something else?

Here is a piece of code:

.col-lg-4{float:left;width:33.33333333%} 
 <div class="row"> <a href="#" title="1 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">1 Блок</div></div></a> <a href="#" title="2 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">2 Блок</div></div></a> <a href="#" title="3 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">3 Блок</div></div></a> </div>

  • Learn to write inline styles. that is, in a string like this (style = "height: 60px; border: black 1px solid") this is very bad. Such style writing has precedence over styles in the style file. then you will have problems to interrupt them + this will trash and litter the code. - Maxim

2 answers 2

Something you namudri with blocks. why div inside links with classes for grid sizes? Also, if you want these elements to be in a row, do not forget that there are only 12 columns in the grid, divide by 4 columns, it will be 3. That is, the class is col-lg-3 and not 4. And add classes for smaller sizes too . Because the layout will float on smaller screens. Or if you want it to be displayed on all screens, then replace col-lg- * with col-xs- *

  <div class="row"> <div class="col-lg-3 element" ><a href="#" title="1 Блок">1 Блок</a></div> <div class="col-lg-3 element" ><a href="#" title="1 Блок">1 Блок</a></div> <div class="col-lg-3 element" ><a href="#" title="1 Блок">1 Блок</a></div> <div class="col-lg-3 element" ><a href="#" title="1 Блок">1 Блок</a></div> </div> <style> .element{ height:60px; border:black 1px solid; } </style>

Plus, note the tip above for tooltips. Get it.

  <div class="row"> <div class="col-lg-3 element" ><a href="#" data-toggle="tooltip" data-placement="top" "title="1 Блок">1 Блок</a></div> <div class="col-lg-3 element" ><a href="#" data-toggle="tooltip" data-placement="top" "title="2 Блок">2 Блок</a></div> <div class="col-lg-3 element" ><a href="#" data-toggle="tooltip" data-placement="top" "title="3 Блок">3 Блок</a></div> <div class="col-lg-3 element" ><a href="#" data-toggle="tooltip" data-placement="top" "title="4 Блок">4 Блок</a></div> </div>

and the script of course

 <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>

Did in the blind. But the idea should be the same. Less code. And the problem with the indentation between the blocks should disappear.

    If you are using bootsrap, you can use: data-toggle = "tooltip".

     <div class="row"> <a href="#" data-toggle="tooltip" data-placement="top" "title="1 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">1 Блок</div></div></a> <a href="#" data-toggle="tooltip" data-placement="right" "title="2 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">2 Блок</div></div></a> <a href="#" data-toggle="tooltip" data-placement="bottom" "title="3 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">3 Блок</div></div></a> <a href="#" data-toggle="tooltip" data-placement="left" "title="3 Блок"><div class="col-lg-4"><div style="height:60px;border:black 1px solid">3 Блок</div></div></a> </div>

    Js-script:

     <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>