Question

我正在使用Bootstrap框架，需要在行的末尾创建一个元素。

<div class="row">
    <div>div 1</div>
    <div>div end</div>
</div>

这些div是连续的 - 这是期望的。但我需要＆＃34;结束div＆＃34;要拉到行的右角的元素。我尝试了很多Bootstrap类。但有些他们保持相邻。

Answer 1

由于Bootstrap 4在display: flex课程中使用flexbox或row，您可以在第二个div上使用ml-auto，这将添加margin-left auto并将该div推到右侧

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div>div 1</div>
    <div class="ml-auto">div end</div>
  </div>
</div>

＆＃13;

Answer 2

这是来自Bootstrap文档。默认情况下，每列都是aligned / floated，但是这样，列之间的空间分布均匀：

<div class="row justify-content-between">
    <div class="col-4">
        <div> Div 1 </div>
    </div>
    <div class="col-4">
        <div> Div End </div>
    </div>
</div>

它使用了flexbox，还有几个选项可用于将列对齐到一行，甚至可以wrap和nest。

通过以下链接阅读：Bootstrap docs - Grid

使用Bootstrap 4还有另一种选择。因为它使用flexbox，您可以将.ml-auto添加到div中的最后row，但您应该对整体row {{保持警惕1}}（它的宽度不应超过12/12列）。您可以在布局/网格部分的Bootstrap 4文档中阅读有关它的任何内容。

Answer 3

试试这个。

＆＃13;

<?php for(;strtotime($fdate)<=strtotime($ldate);){ ?>

   <label>Date</label>
   <input class="form-control" name="fdate" value='<?php echo $fdate; ?>' readonly>

   <label>Place Visited</label>
   <input class="form-control" type="text" name="outletVisited" placeholder="Name of outlet visited">

 <?php
  $fdate=date("d-m-Y",strtotime("+1 day", strtotime($fdate)));
 }?>

＆＃13;

Answer 4

添加pull-right Bootstrap类

<div class="container">
    <div class="row">
        <div class="pull-left">div 1</div>
        <div class="pull-right">div end</div>
    </div>
</div>

Bootstrap在行的末尾创建一个元素

4 个答案: