Question

有一个集中且响应迅速的Bootstrap container，其中包含内容。我想在容器旁边推一个div（右侧，top位置与container相同）而不影响居中容器。

问题是，当我将float: left添加到容器并将float: right添加到外部div时，容器不再居中。只有float: right到外部div只将div推到右侧，但是如何继续？

我认为固定position: absolute的{{1}}是不可取的，因为响应width会更改container不同的视口。

是否有机会在没有JavaScript的情况下使用HTML和CSS修复此问题？

＆＃13;

width

＆＃13;

.main-content {
  border: 1px solid red;
}
.outer {
  border: 1px solid red;
  background: yellow;
  text-align: center;
  float: right;
  width: 70px;
}

＆＃13;

Answer 1

这是您正在寻找的行为吗？

＆＃13;

.main-content {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container main-content">
  <div class="row">
    <div class="col-md-6">
      Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content...
    </div>
    <div class="col-md-6">
      Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content...
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12 text-right">
      Outer
    </div>
  </div>
</div>

＆＃13;

或者这个：

＆＃13;

.main-content {
  border: 1px solid red;
  position: relative;
}
.outer {
  border: 1px solid red;
  background: yellow;
  text-align: center;
  position: absolute;
  width: 100px;
  top: 0;
  right: -100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container main-content">
  <div class="outer">
    Outer
  </div>

  <div class="row">
    <div class="col-md-6">
      Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content...
    </div>
    <div class="col-md-6">
      Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content... Here is the content... Here ist the content... Here is the content...
    </div>
  </div>
</div>

＆＃13;

Answer 2

当窗口对于容器来说太小时，你能不能看到它吗？

如果您只是希望它位于右上方的容器之外，您可以使用一些相对/绝对定位并在主容器内移动“外部”div。

.main-content {
  border: 1px solid red;
  position:relative;
}

.outer {
  border: 1px solid red;
  background: yellow;
  position:absolute;
  right:-70px;
  top:0px;
  text-align: center;
  width: 70px;
}

https://jsfiddle.net/8ahrxtsk/4/

如果你想把它放在容器里面，只需将“右”位置改为0px。

将div放在居中且响应迅速的Bootstrap容器元素旁边

2 个答案: