如何使用 Bootstrap 在另一个 DIV 的左侧显示 DIV [重复]

Posted

技术标签:

【中文标题】如何使用 Bootstrap 在另一个 DIV 的左侧显示 DIV [重复]【英文标题】：How to display DIV to the left of another DIV using Bootstrap [duplicate] 【发布时间】：2021-01-13 02:09:53 【问题描述】：

我想创建一个 棋盘格样式 的页面 (html)，因此第一行的图像位于内容的左侧，第二行的图像位于内容的右侧内容。

从语义上讲，我可以改变 HTML 的结构来实现这一点，但有没有办法纯粹使用 CSS + Bootstrap 4 来做到这一点，这样 HTML 就不需要改变了。

我最初有一个课程“left-img”和“right-img”来实现这一目标，但没有成功。

目前我在我的CSS 中有这个，每个事件元素都在其中。

.checker:nth-child(even) .img-wrapper 
    float:right;

.checker:nth-child(odd) .img-wrapper 
    float:left;

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



<div class="row checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://via.placeholder.com/140x100" >
    </div>
</div>
<div class="row checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://via.placeholder.com/140x100" >
    </div>
</div>

完整示例

我的密码笔https://codepen.io/s-mcdonald/pen/qBZvwyX?editors=1100

【问题讨论】：

【参考方案1】：

我希望 css 和 html 的这些变化对你有帮助！！！

.checker:nth-child(odd) > .col-lg-6:last-of-type
    float:left !important;


.checker:nth-child(even) > .col-lg-6:first-of-type
    float:left !important;



img
  width:100px;


.col-lg-6
  float:right;


.row
  float:right;
  width:100%;

<div class="row checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" >
    </div>
</div>
<div class="row checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" >
    </div>
</div>

【讨论】：

谢谢 Yasaman，根据我的 CMS，我无法更改 HTML 或根据行更改类。因此，每个 html 标记都需要相同，并且仅在 CSS 中实现这一点。 我删除了html的更改，你可以使用css。 再次感谢 Yeasaman，css 的唯一问题是我有引导程序，我不愿意更改或修改默认引导程序类。我的代码笔是codepen.io/s-mcdonald/pen/qBZvwyX?editors=1100【参考方案2】：

您只需在您的.checker:nth-of-type(even) 中添加display: flow-root!important;

.checker .img-wrapper img 
    width:100%;
    height:auto;


/* Set the default behaviour */
.checker .img-wrapper 
    padding: 0px!important

.checker .text-wrapper 
    padding: 0px!important


/* Help determin if we have the right widget */
.checker:nth-of-type(even) 
    background-color:#eeeeee;
    display: flow-root!important;



//margin 0 to row
.checker 
  margin-left: 0px!important;
  margin-right: 0px!important;

//padding 0 to col
.col-lg-6 
  padding: 0px!important;

h2, .text 
  padding: 12px;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  
  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" >
        </div>      
    </div>

  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" >
        </div>      
    </div>
  
  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" >
        </div>      
    </div>
  
  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" >
        </div>      
    </div>
  
</div>

【讨论】：

Hey Mehedi，这行得通，我添加了 ".checker:nth-of-type(even) .text-wrapper float:right !important; " 以确保文本也在流动，但这解决了它。谢谢 你也可以添加 flex-direction: row-reverse;到你的 .checker:nth-of-type(even)，它也可以工作 现场演示：使用 row-reverse 000541203.production.codepen.plumbing【参考方案3】：

您的 CSS 是正确的，但如果您需要对齐图像，那么您应该调用 img 到您的 CSS

.checker:nth-child(even) .img-wrapper img 
    float:right;

.checker:nth-child(odd) .img-wrapper img 
    float:left;

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



<div class="row m-0 checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://via.placeholder.com/140x100" >
    </div>
</div>
<div class="row m-0 checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://via.placeholder.com/140x100" >
    </div>
</div>

【讨论】：

这接近我所需要的。我意识到我的第 n 个（偶数）或第 n 个孩子（奇数）有问题。检查器类在每一行上，因此 CSS 需要选择每隔一个“.checker”作为第二个兄弟 我查找了一个伪选择器“.nth-of-type(even)”。仍然没有运气，但我认为它已经接近我所需要的了 还没有，还是不能如我所愿。我有一个密码笔codepen.io/s-mcdonald/pen/qBZvwyX?editors=1100

以上是关于如何使用 Bootstrap 在另一个 DIV 的左侧显示 DIV [重复]的主要内容，如果未能解决你的问题，请参考以下文章

当我将鼠标悬停在另一个 div 上时，如何使文本出现在一个 div 中？

如何在另一个样式组件中定位样式组件？

一个div如何浮在另一个div之上？

如何仅使用 vanilla JavaScript 和 Node-API 将多个 div 元素包装在另一个元素节点周围？

如何在另一个 div 内动态改变宽度的 div 上居中文本？

向上滚动时如何将一个div隐藏在另一个半透明的div后面