Question

基本上，我必须编写此布局的代码，并且不确定如何解决它。

这是布局。

这行不通。

    <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>

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

我正在使用Bootstrap4。CSS网格解决方案也可以工作。

谢谢

Answer 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>

Answer 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

如何使这种脱离网格的布局在所有屏幕上都能正常工作

2 个答案: