Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

html - Bootstrap grid breaks in smallest size

Using this code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">

    <label class="col-2 col-form-label">Email</label>

    <div class="col-8">
      <input type="text" class="form-control">
    </div>

    <div class="col-2">
      text
    </div>

  </div>
 </div>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

The columns can't shrink in width less than 30px (due to padding) so, as screen width narrows, eventually the columns wrap (stack vertically). To prevent this, adjust the padding on the columns inside the row. Bootstrap 4 has a no-gutters class for this purpose...

https://codeply.com/go/XaBsD5AhJG

<div class="container">
    <div class="row no-gutters">
        <label class="col-2 col-form-label">Email</label>
        <div class="col-8">
            <input type="text" class="form-control">
        </div>
        <div class="col-2 pl-1">
            text
        </div>
    </div>
</div>

Bootstrap 4 also has padding utility classes classes that can be used to adjust padding on individual elements. For example, I used pl-1(padding-left) on the last column to give a little space between the input and "text". Another Bootstrap 4 option is to use flex-nowrap on the row which will prevent wrapping and creating horizontal scrolling when there is overflow.

In Bootstrap 3, you need to add CSS to adjust the padding.

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

Related
Bootstrap col-xs wrapping
Bootstrap xs columns wrap


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...