將div推到居中且響應迅速的Bootstrap容器元素旁邊

Question

有一個居中且響應迅速的Bootstrap container其中container內容。 我想將div推到容器旁邊（右側，與container相同的top位置），而不影響居中的容器。

問題是，當我在容器中添加float: left並在外部div中添加float: left float: right ，容器不再居中。 僅float: right div的右側僅將div推至右側，但是之后如何繼續？

我認為position: absolute具有固定width position: absolute是不可行的，因為響應container將使用不同的視口更改其width 。

是否有機會僅使用HTML和CSS而不使用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> 

Answer 1

這是您正在尋找的行為嗎？

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

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

或這個：

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

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

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。