css - Long URLs don't stay inside the Bootstrap column -




i'm developing wordpress theme bootstrap grids, , see problem in mobile view. fixed bootstrap column, there links in references section don't stay inside column , make mess of grids , create horizontal scroll bar:

enter image description here

enter image description here

i've tried , nothing works, please need help.

here code single.php:

<div class="c-content-box c-size-md" style="margin-top:4%;"> <div class="container">     <div class="row">          <div class="c-content-blog-post-card-1-grid">             <div class="row">                      <div class="col-md-12">                         <div class="col-md-8 wow animate fadeinleft">                                  <div class="c-media 2 img">                                     <div class="c-overlay-wrapper">                                         <div class="c-overlay-content">                                             <?php the_post_thumbnail( '', array( 'style' => 'max-width:100%; height:auto;' ) ); ?>                                         </div>                                     </div>                                 </div>                                  <?php                                 while ( have_posts() ) : the_post();                                      get_template_part( 'template-parts/content', get_post_format() );                                      ?>                                      <div class="col-md-12 c-margin-b-60">                                         <?php                                             the_post_navigation( array(                                                 'prev_text' => '<button type="button" class="col-md-5 col-md-offset-1 col-xs-6 btn btn-md c-btn-red c-btn-square ">post anterior</button>',                                                 'next_text' => '<button type="button" class="col-md-5 col-md-offset-1 col-xs-6 btn btn-md c-btn-red c-btn-square ">próximo post</button>',                                              ));                                              ?>                                     </div>                                                                               <?php                                     echo '<div class="col-md-12 c-margin-t-20">';                                      // if comments open or have @ least 1 comment, load comment template.                                     if ( comments_open() || get_comments_number() ) :                                         comments_template();                                     endif;                                  endwhile; // end of loop.                                     echo '</div>'                                     ?>                          </div>                            <div class="col-md-4 ">                             <div class="col-md-12 wow animate fadeinright" >                                 <?php get_sidebar(); ?>                             </div>                         </div>                                        </main><!-- #main -->                                 </div><!-- #primary -->                     </div>             </div>         </div>     </div> </div> 

you'll need add css word-wrap text.

div {    width: 100px;    border: 1px solid black;    margin: 5px;  }  .wrapped {    word-wrap: break-word;  }
<div>https://stackoverflow.com/questions/45800283/content-posts-doesnt-stay-inside-the-bootstrap-cols</div>    <div class="wrapped">https://stackoverflow.com/questions/45800283/content-posts-doesnt-stay-inside-the-bootstrap-cols</div>





wiki

Comments

Popular posts from this blog

elasticsearch - what is the equivalent data type for geo_point in hibernate search? -

firebase - How to wait value in Ionic 2 -

Jenkins: find build number for git commit -