在引导程序中浮动 div [重复]答案

【问题标题】：Float divs in bootstrap [duplicate]在引导程序中浮动 div [重复]
【发布时间】：2018-02-01 07:15:38
【问题描述】：

我怎样才能得到你可以在图片上看到的结果？我是 col-md-4 div，我希望 2 个 div 彼此相邻。左侧的图标和图标旁边的文字。

我尝试过的，没有任何自定义 css：使用这段代码，到 div 是在彼此之下，而不是浮动的。

echo '<div class="col-md-4 elony">
                    <div class="elony_ikon_div pull-left">'.$elony['elony_ikon'].'</div>
                    <div class="pull-right">
                        <span class="elony_nev">'.$elony['elony_nev'].'</span>
                        <p class="elony_text">'.$elony['elony_text'].'</p>
                    </div>
                    <div class="clearfix"></div>
                </div>';

enter image description here

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

要使两个 div 彼此相邻，您可以使用类行开始一个新的 div，如下所示：

echo '<div class="col-md-4 elony">
          <div class = "row">
              <div class = "col-md-6">
                   '.$elony['elony_ikon'].'
              </div>
              <div class = "col-md-6">
                   '.$elony['elony_text'].'
              </div>
          </div>';

【讨论】：

谢谢！我为图标添加了 colmd-1-，为文本添加了 col-md-11。

【解决方案2】：

您必须在您想要的两个项目周围添加row 类。在这种情况下，您将看到：

<div class="col-md-4 elony">
    <div class="row"> <!-- add the row here -->
        <div class="elony_ikon_div pull-left">'.$elony['elony_ikon'].'</div>
        <div class="pull-right">
            <span class="elony_nev">'.$elony['elony_nev'].'</span>
            <p class="elony_text">'.$elony['elony_text'].'</p>
        </div>
        <div class="clearfix"></div>
    </div> <!-- close the row here -->
</div>

【讨论】：

【解决方案3】：

Bootstrap 可以为您做到这一点。您需要做的是将.col-* 元素嵌套到其他.col-* 元素中。因此，您可以在与其他两个元素相邻的元素中添加两个相邻的元素。我创建了一个基本的column-nesting 代码示例：

提示：始终将列包裹在 .row 元素中，这样可以防止包裹错误并移除列的外部装订线。

.box {
  border: 1px solid #333;
}

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-4 box">
      <div class="row">
        <div class="col-xs-4"><img src="https://icon.now.sh/accessibility" class="icon" alt=""></div>
        <div class="col-xs-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      </div> 
    </div>
    <div class="col-xs-4 box">
      <div class="row">
        <div class="col-xs-4"><img src="https://icon.now.sh/accessibility" class="icon" alt=""></div>
        <div class="col-xs-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      </div> 
    </div>
    <div class="col-xs-4 box">
      <div class="row">
        <div class="col-xs-4"><img src="https://icon.now.sh/accessibility" class="icon" alt=""></div>
        <div class="col-xs-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      </div> 
    </div>
  </div>
</div>

【讨论】：