Question

我这里有一个代码段，因为不建议使用col-xs-6，因此我使用了 bootstrap 4 col-6 。

我的问题是当浏览器窗口调整第二个col-6的大小而不是上升和下降（我的意思是响应能力）。

如何纠正？

<div class="container-fluid" style="border: 3px solid red;">
	<div class="row">
	<div class="col-6">
		<img src="https://picsum.photos/id/237/200/300" class="img-responsive" width="200" height="200">
    </div>
	<div class="col-6">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In vitae turpis massa sed elementum. Placerat orci nulla pellentesque dignissim.</p>
  </div>
	
</div>
</div>

Answer 1

如果您正确添加Bootstrap CSS和JS，col-6将像col-xs-6一样工作。

我看到您尚未添加Bootstrap @ 4 CSS和JS文件。因此，没有引导CSS和JS文件，引导组件将无法工作。这是模板your example code。

带有HTML的入门模板（已修改）。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Col-6 issue</title>
  </head>
  <body>
    <div class="container-fluid" style="border: 3px solid red;">
    <div class="row">
    <div class="col-6" style="border: 2px solid yellow;">
        <img src="https://picsum.photos/id/237/200/300" class="img-fluid d-block" />
    </div>
    <div class="col-6" style="border: 2px solid green;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In vitae turpis massa sed elementum. Placerat orci nulla pellentesque dignissim.</p>
  </div>

</div>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

使用Bootstrap Starter template。同样，您会因响应image class而犯错。 img-responsive class在Bootstrap版本4中已弃用。现在是img-fluid Responsive Images。如果要制作响应式图像，则应从width中删除height和attribute img tag。您还将学习CSS3 flex box。 Here is the complete guid for flex box。

希望这会有所帮助。

Answer 2

如果将borderSide: BorderSide(width: 2.0, color: Colors.red),替换为col-6，这将使父级col-md-6跨大屏幕显示在页面上，但列将在较小屏幕显示时垂直响应

row也是一样，但是使用它取决于您需要的断点_

有关断点大小的参考，请参见：https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

col-sm-6

引导4 col-6网格像col-xs-6网格一样没有响应

2 个答案: