All geek questions in one place

How to prevent break in div with float? (Bootstrap)

I have the following HTML. And the text (tidbit) on the right continues to fall on the next line. It is in chrome. Is there a way to keep what is inside the div-pull div on the same line? here is jsFiddle .

<div class="container" style="width:500px;> <div class="controls controls-row"> <span class="add-on">This can be quite long</span> <div class="pull-right"> <input class="input-mini" name="Amount" type="number" /> <button type="button" class="btn" style="margin-bottom: 10px">Add</button> <div style="text-align:right; width:40px;">tidbit</div> </div> </div> </diV>
+4
source share
4 answers

You can add pull-left and pull-right inside the parent container pull-right

 <div class="container" style="width:500px;"> <div class="controls controls-row"> <span class="add-on">This can be quite long</span> <div class="pull-right"> <div class="pull-left"> <input class="input-mini" name="Amount" type="number" /> <button type="button" class="btn" style="margin-bottom: 10px">Add</button> </div> <div class="pull-right" style="text-align:right; width:40px;">tidbit</div> </div> </div> </diV>

Demo here

Hope this helps

+4
source

You can do this with two fixes:

  • Set display: inline-block to div "tidbit".
  • Set white-space: nowrap to the pull-right container.

 <div class="container" style="width:500px;> <div class="controls controls-row"> <span class="add-on">This can be quite long</span> <div class="pull-right"> <input class="input-mini" name="Amount" type="number" /> <button type="button" class="btn" style="margin-bottom: 10px">Add</button> <div style="text-align:right; width:40px; display: inline-block;">tidbit</div> </div> </div> </diV> 

 .pull-right{ white-space:nowrap; }

Script example

+6
source

Remove the div tag around the tidbit and wrap it in the gap if necessary - JSfiddle

 <div class="container" style="width:500px;> <div class="controls controls-row"> <span class="add-on">This can be quite long</span> <div class="pull-right"> <input class="input-mini" name="Amount" type="number" /> <button type="button" class="btn" style="margin-bottom: 10px">Add</button> <span>tidbit</span><!--Move this the before or after the button--> </div> </div> </diV>
0
source

What is the total width of the controls of the div class. I think it exceeds 500 pixels.

If the width of these 3 exceeds 500 pixels, the text in the form of a topic will move to the next line. Thus the control width

0
source

Source: https://habr.com/ru/post/1482843/

More articles:


All Articles