如何使网格布局在所有屏幕上都有效[重复]答案

【问题标题】：How to make this out of grid layout work on all screen [duplicate]如何使网格布局在所有屏幕上都有效[重复]
【发布时间】：2024-05-02 17:25:02
【问题描述】：

基本上我必须对这个布局进行编码，但不知道如何解决它。

这是布局。

这行不通。

    <div class="container">
      <div class="row">
        <div class="col-md-4">
         text
        </div>
        <div class="col-md-8">
         image
        </div>
      </div>
   </div>

这也不会。

    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4">
         text
        </div>
        <div class="col-md-8">
         image
        </div>
      </div>
   </div>

必须有一种更好的方法来处理这种布局，而不是为不同的断点键入许多媒体查询。

我正在使用 Bootstrap 4。CSS 网格解决方案也可以。

谢谢

【问题讨论】：

<img style="width:100%" />?
请正确解释您的问题。你已经尝试过什么，你期待什么。
width: 100% 不起作用@Roy，因为图像在 .container 类中，这意味着它不会超过该类中指定的容器宽度。

标签： javascript twitter-bootstrap css bootstrap-4

【解决方案1】：

此示例未使用 Bootstrap 4 或 CSS Grid，但希望您可以将其用作概念验证。我试图让它尽可能简单。

基本上，您只需在全角网格和常规网格之间进行交换，我用.container 和.container-full-width 定义了它。您可以更改这些值以满足您的需要。

JSFiddle Demo here

html,
body {
  margin: 0;
  padding: 0;
}

.section {
  width: 100%;
  height: auto;
}

.section:nth-child(even) {
  background: #9a9a9a;
}

.container {
  display: flex;
  max-width: 700px;
  margin: 0 auto;
}

.container--full-width {
  max-width: 2600px;
}

img {
  width: 100%;
  height: auto;
}

.half {
  width: 50%;
}

<div class="section">
  <div class="container">
      <div class="half">
         <img src="https://placekitten.com/1000/600" alt="">
      </div>
      <div class="half">
        <p>text</p>
      </div>
  </div>
</div>

<div class="section">
  <div class="container container--full-width">
      <div class="half">
         <img src="https://placekitten.com/1000/600" alt="">
      </div>
      <div class="half">
        <p>text</p>
      </div>
   
  </div>
</div>

【讨论】：

【解决方案2】：

这是你想要达到的目标吗？

.col-8{
  background:red;
}
.col-4{
  background:green;
}

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


  <div class="container">
      <div class="row">
        <div class="col-4">
           1/3
        </div>
        <div class="col-8">
           2/3
        </div>   
      </div>
   </div>

欲了解更多信息，请参阅Bootstrap - Grid system

【讨论】：