How to prevent paragraph from expanding bootstrap's col-auto parent width?
Question
I'm using bootstrap's row with two col-auto . Inside the second, I have a form with <input> 's and a paragraph <p> . This second column should have a minimum possible width, according to the input fields (all the input fields have a min-width assigned via maxlength and size attributes).
My problem is that the paragraph is always increasing the width of the column if the paragraph is long enough. I'd rather have some linebreaks and show the content on more lines. Is there a way to do this without setting a fixed width, adding <br> or using javascript?
3 answers
solution1
0 2019-08-25 14:05:05
lol can be easy ... i hope this post will not be treat as advertising :) i bought pingendo.com so i can give you this as an exercise to improve my skills with pingendo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css">
</head>
<body>
<div class="py-5 px-0 mx-0">
<div class="container col-sm-12 col-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-4 bg-primary"> COL1 </div>
<div class="col-8 bg-secondary">
<input class="form-control" type="text">
<p > I'm a quite long paragraph and I do not want to expand the width of my column, I'd rather be wrapped. </p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
anyway... if you download the thing you should click on new project, _blank.html , then you will see a blank screen then push f2 key and in the left side you can see some bootstrap objects you can use to test quick an setup for anything use bootstrap
solution2
0 2022-04-15 02:11:50
Can't you just replace <div class="col-auto bg-warning"> with <div class="col bg-warning"> ?
ie don't use col-auto , just use col for the div containing the <p>
solution3
0 2022-12-15 19:38:15
Old question but it took me a while to find the answer. Add the following style to the child in the col-auto div to prevent it from expanding the width of the parent:
style="min-width: 100%; width: 0;"
reference: https://stackoverflow.com/a/36092670/1788672
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.