locked
hidden div RRS feed

  • Question

  • User1024191908 posted

    I wand to have a row of divs horizontally and when say the 4th div doesn't fit it doesnt go to the next line but it is shown partially and like part of it that doesn't fit goes under the edge of the parent div.

    how should I do that?

    Saturday, December 2, 2017 8:08 PM

Answers

  • User-832373396 posted

    <g class="gr_ gr_17 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="17" data-gr-id="17">Hi</g> <g class="gr_ gr_14 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="14" data-gr-id="14">anooshiravan</g>,

    anooshiravan

    when say the 4th div doesn't fit it doesnt go to the next line

     Sir, I suggest that you could check this function of bootstrap at first. It seems that using bootstrap could do that effect. Responsive web design is about creating websites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

    First; create a row (<div class="row">). Then, add the desired number of columns (tags with <g class="gr_ gr_15 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="15" data-gr-id="15">appropriate </g>.col-*-*<g class="gr_ gr_15 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Style multiReplace" id="15" data-gr-id="15"> classes</g>). Note that numbers <g class="gr_ gr_16 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="16" data-gr-id="16">in </g>.col-*-*<g class="gr_ gr_16 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Style multiReplace" id="16" data-gr-id="16"> should</g> always add up to 12 for each row.

    The Bootstrap grid system has four classes:

    • xs (for phones - screens less than 768px wide)
    • sm (for tablets - screens equal to or greater than 768px wide)
    • md (for small laptops - screens equal to or greater than 992px wide)
    • lg (for laptops and desktops - screens equal to or greater than 1200px wide)
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <h3>Column 1</h3>
          <p>Lorem ipsum dolor..</p>
          <p>Ut enim ad..</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 2</h3>
          <p>Lorem ipsum dolor..</p>
          <p>Ut enim ad..</p>
        </div>
        <div class="col-sm-4">
          <h3>Column 3</h3> 
          <p>Lorem ipsum dolor..</p>
          <p>Ut enim ad..</p>
        </div>
      </div>
    </div>

    and in MVC, it's popular to use bootstrap.

    With regards, Angelina Jolie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 4, 2017 6:04 AM