Question

我有一个使用浏览器进入边缘的div，并且会添加与页面中心的居中容器对齐的内容。我用col-md-6创建了一个用背景颜色填充的行，但是当我添加容器时，内容会与浏览器的边缘对齐而不是容器的边缘。 / p>

我正在使用Bootstrap，真的需要你的帮助。如果我没有正确表达问题，我附上的图片应该有所帮助。

感谢您的帮助。

＆＃13;

.login-msg-box {
	background: rgba(0,0,0,0.5);
	margin-top: 200px;
	height: 400px;
}

＆＃13;

<div class="row">
    <div class="col-md-6 login-msg-box">
        <div class="container">
            <h2 class="msg-heading-line">LOG IN</h2>
        </div>
    </div>
</div>

＆＃13;

Image shows the current situation and the desired situation

Answer 1

当您为margin-top执行.login-msg-box时，您可以向margin-left添加.container。结果如下：

＆＃13;

.login-msg-box {
	background: rgba(0,0,0,0.5);
	margin-top: 200px;
	height: 400px;
}

.container {
    margin-left: 200px;
}

＆＃13;

<div class="row">
    <div class="col-md-6 login-msg-box">
        <div class="container">
            <h2 class="msg-heading-line">LOG IN</h2>
        </div>
    </div>
</div>

＆＃13;

Answer 2

您可以向div添加任意数量的偏移量

 <div class="row">
        <div class="col-md-6 col-md-offset-6 login-msg-box">
             <div class="container">
                  <h2 class="msg-heading-line">LOG IN</h2>
             </div>
        </div>
     </div>

Answer 3

我认为您正在寻找类似https://jsfiddle.net/neya0v76/1/

的内容

我将所有内容都切换到xs所以它在小提琴中看起来正确，只是重新构建了你的HTML

<div class="row">
  <div class="col-xs-6 login-msg-box">
    <div class="row">
      <div class="col-xs-6">
      </div>
      <div class="col-xs-6">

        <h2 class="msg-heading-line">LOG IN</h2>
        <input type="text"/>
        <input type="text"/>
      </div>
    </div>
  </div>

容器对齐到浏览器窗口的边缘

3 个答案: