Question

请参阅随附的代码段。我有一个＆＃39;项目＆＃39;组件，我将动态检索标题和一些项目符号说明。

每个项目都会有一个“添加项目”。按钮，我希望与列表的右下角对齐 - 不在下面。

如何在确保列表文本在适当的位置下降到新行的同时执行此操作？

我想避免将范围放在列表中。有没有一种Bootstrap方法可以做到这一点，如果没有，还有另一种方法吗？

谢谢，

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


  <body>
    <div class="container bg-info">
      <div class="col-xs-4">
        <h1>Item Title</h1>
      </div>
      <div class="col-xs-8">
        <span type="button" class="btn btn-success pull-right">Add Item</span>
        <ul class="list-unstyled">
          <li>
            <i class="fa fa-check" aria-hidden="true"></i> 
            Description 1, Description 1, Description 1, Description 1</li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i>
            Description 2
            </li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i> 
            Description 3, Description 3, Description 3, Description 3</li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i>
            Description 4, Description 4, Description 4, Des 4</li>
        </ul>
      </div>
    </div>
  </body>

＆＃13;

Answer 1

我认为你可以使用职位

.container {
    position: relative;
}

.btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

修改
尝试为ul添加宽度

.list-unstyled { width: 85%; }

Answer 2

<body>
    <div class="container bg-info">
      <div class="col-xs-4">
        <h1>Item Title</h1>
      </div>
      <div class="col-xs-8">        
        <ul class="list-unstyled">
          <li>
            <i class="fa fa-check" aria-hidden="true"></i> 
            Description 1, Description 1, Description 1, Description 1</li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i>
            Description 2
            </li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i> 
            Description 3, Description 3, Description 3, Description 3</li>
          <li>
            <i class="fa fa-check" aria-hidden="true"></i>
            Description 4, Description 4, Description 4, Des 4
               <span type="button" class="btn btn-success pull-right">Add Item</span>
          </li>             
        </ul>      
      </div>     
    </div>
  </body>

将按钮放在列表的右下角

2 个答案: