Question

我在html / css中有一个小标题栏，其中有几个图标浮动到右侧。我希望它们保持在原位并且如果右侧区域太小，则将标题（在左侧）包裹在下方。现在，我的html看起来像是这样（使用bootstrap）：

 <div class="activity-panel-item--header">
     <div class="col-sm-8"><p>02 Development, LLC v. 607 South Park, LLC </p></div>
     <div class="col-sm-4"><span class="icon icon-trash-o pull-right"></span><span class="icon icon-cog2 pull-right"></span><span class="icon icon-pencil3 pull-right"></span></div>
</div>

所以我有一个col-sm-8和col-sm-4。从长远来看这不起作用，因为col-sm-4在某些尺寸上太小，所以我需要使用图标设置右侧列具有设置宽度（140px可以说）。因此，如果在右侧设置最小宽度，则会在较小尺寸上打破。

我想知道是否有一种方法让col-sm-8左侧的标题在响应时绕着右侧的设置宽度按钮移动（我基本上希望按钮留在同一个地方一直）。有点像右边的按钮是绝对位置但不不在流程中，所以文本会对它作出反应。

这是我用https://jsfiddle.net/DTcHh/24085/

愚弄的小提琴

编辑

所以我通过以下方式即兴创作了一个解决方案： - 将正确的图标栏元素从dom流中取出，通过绝对定位并给它设置一个 - 向包含左侧和右侧项目的元素添加与填充相同的宽度

然后我可以一起消除col的全部。代码如下：

HTML：

  <div class="activity-panel-item col-md-12">
    <div class="activity-panel-item--header">

      <p>02 Development, LLC v. 607 South Park, LLC </p>
      <div class="activity-panel-item--header--iconbar">
        <span class="icon icon-trash-o pull-right">1</span><span class="icon icon-cog2 pull-right">2</span><span class="icon icon-pencil3 pull-right">3</span>
  </div>
    </div>
    <div class="activity-panel-item--body">
      <p>test 123345.</p>
      <h3></h3>
      <p>cases</p>
    </div>
  </div>

CSS：

.activity-panel-item {
  height: 100%;
  padding: 0;
}

.activity-panel-item--header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 12px 125px 12px 12px;
  min-height: 50px;
  background-color: rgba(0, 0, 0, 0.8);
}

.activity-panel-item--header p {
  color: #fff;
}

.activity-panel-item--header .icon {
  cursor: pointer;
  color: #fff;
  margin: 0px 12px;
  font-size: 20px;
}

.activity-panel-item--body {
  overflow-y: auto;
  padding: 10px 20px;
  display: block;
  width: 100%;
  height: 100%
}

.activity-title-input {
  width: 100%;
}

.activity-panel-item--header--iconbar {
  display: block;
  float: right;
  top: 10px;
  right: 10px;
  width: 125px;
  min-height: 50px;
  height: auto;
  position: absolute;
}

见工作小提琴：https://jsfiddle.net/DTcHh/24114/

任何和所有输入都会有所帮助，或者如果有人有不同的工作方法，那也很棒。谢谢！

Answer 1

你可以在没有引导程序col-*-*的情况下执行此操作，并为两个div添加显式宽度，并为图标栏添加一些额外的样式。

更新代码

<div class="activity-panel-item--header">
  <div class="pull-left" style="width: 75%;">
    <p>02 Development, LLC v. 607 South Park, LLC </p>
  </div>
  <div class="pull-right" style="position: absolute; right: 0px; min-width: 25%;"><span class="icon icon-trash-o pull-right">1</span><span class="icon icon-cog2 pull-right">2</span><span class="icon icon-pencil3 pull-right">3</span></div>
</div>

jsFiddle

编辑1

如果你根据这个解决方案深入思考，我们都是同一点。让我解释一下，我向图标栏提供最小宽度 25％，向左边元素提供75%宽度。这意味着取决于图标栏的情况宽度可以增加，但它必须至少是总屏幕或容器的25%，左元素的宽度是75%，可以根据情况减少。

你给宽度125px或任何一个图标栏，这意味着它可以根据情况增加或减少但原件是125px

这里的情况我指的是面积和屏幕分辨率。如果图标较大而且不适合25%，那么如果图标栏不适合125px，则此宽度可以增加并且左侧元素可以减少与您编辑的情况相同然后此宽度可以增加，因为我们是没有提到图标栏的最大宽度或左边元素的最小宽度。

编辑2

我希望在stackoverflow上编译答案的次数不是我需要的时间。

除了编码之外，让我们做一些数学运算。假设我们每个都有3个图标（32x32）。因此，图标包装器的总宽度将为（32 + 32 + 32）96px向右侧的每个图标（12x3 = 36）添加12px的小余量以获得美感。现在包装器宽度为96 + 36 = 132px。我们的设备宽度为400px。我的图标包装器是{25} 100px 400px（设备宽度），您的包装器是125px。我说OK浏览器图标包装的最小宽度为100px，但如果图标较大且不适合100px，您可以根据需要增加此宽度，在这种情况下它会增加{{1} } 100px或任何。但我不想将这些图标分解为下一行。它们应以原始大小和样式（32x32）加上边距显示。您可以打破左侧内容（文本）以包围这些图标，但不要破坏图标本身。他们应该保留原来的大小。无论设备宽度是多少。浏览器，请不要减小图标大小，只需增加包装宽度。

您的132px小于125px。所以你的包装器会破坏，其中一个图标将移动到下一行。直到你必须找到CSS并在132px中明确写出132px或任何内容。如果一个月后你的老板说请放置40x40的图标并在3个月之后等等......

尝试一下，放置较大的图标，看看width会发生什么。

Answer 2

除非我完全误解你..这是一个简单的方法。 CSS太多了所以我使用了自己的课程，但你得到了这个概念。

<div class="top">
<div class="content1">
    <p>02 Development, LLC v. 607 South Park, LLC </p>
</div>
<div class="content2">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
</div>
    <div class="content3">
    <p>test 123345.</p>
    <h3>Nothing Here</h3>
    <p>cases</p>
</div>

演示：https://jsfiddle.net/norcaljohnny/ovo83p5k/

保持图标栏向右浮动并在

2 个答案: