Question

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

我尝试了什么，没有任何自定义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

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

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

Answer 3

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

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

＆＃13;

.box {
  border: 1px solid #333;
}

.icon{
  width: 100%;
  height: auto;
}

＆＃13;

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

＆＃13;

Float divs在bootstrap中

3 个答案: