将div推到居中且响应迅速的Bootstrap容器元素旁边 [英] Push div next to centered and responsive Bootstrap container element

问题描述

其中有一个内容集中且响应迅速的Bootstrap Container .我想将div推到容器旁边(右侧，与 container 相同的 top 位置)，而不影响居中的容器.

There is a centered and responsive Bootstrap container with content in it. I want to push a div next to the container (right side, same top position as container) without affecting the centered container.

问题是，当我将 float:left 添加到容器并将 float:right 添加到外部div时，容器不再居中.仅 float:right 到外部div会将div仅推到右侧，但是之后如何继续?

The problem is, when i add float: left to the container and float: right to the outer div, the container is not centered anymore. Only float: right to the outer div pushes the div only to the right side, but how to go on after?

我认为固定宽度 的 position:absolute 是不可行的，因为响应式 container 会更改其 width 具有不同的视口.

I think position: absolute with fixed width is no option because the responsive container will change its width with different viewports.

是否有机会仅使用HTML和CSS而不使用JavaScript来解决此问题?

Is there a chance to fix this only with HTML and CSS without JavaScript?

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

<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="outer">
  Outer
</div>

推荐答案

当窗口对于容器而言太小时，您看不到它吗?

Are you ok with it not being visible when the window is too small for the container?

如果只希望它位于容器的右上方，则可以使用一些相对/绝对位置并将外部" div移动到主容器内.

If you just want it to be outside the container to the top right, you can use some relative/absolute positioning and move the "outer" div inside the main container.

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

If you want it inside the container, just change the "right" position to 0px.

这篇关于将div推到居中且响应迅速的Bootstrap容器元素旁边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！