Question

我在我的网页上有一个课程行，在那个课程中我有一个部门，但我想在中心显示该部门但是我无法完成此操作。这是我简单的行类。

      <div class="row">
      <div id="left" class="col-md-6">
       <div id="leftin" class="col-md-6"></div>
       </div>
    <div id="right" class="col-md-6"></div>
    </div>

和我的css

 #left
{

 height: 150px;
}
#leftin
{
 background: url(news_image_04.jpg) no-repeat;
 background-size: 100% 100%;
 height: 150px;
 margin: 0 auto;
 }
#right
{
  background: url("news_image_03.jpg") no-repeat;
  background-size: 100% 100%;
  height: 150px;
 }

我想把左翼师留在左翼分区

Answer 1

只是让浮动没有。

#leftin {
  background: rgba(0, 0, 0, 0) url("news_image_04.jpg") no-repeat scroll 0 0 / 100% 100%;
  border: 1px solid black;
  float: none; /* make the float none */
  height: 150px;
  margin: 0 auto;
}

 #left
{

 height: 150px;
 border:1px solid red;
}
#leftin {
  background: rgba(0, 0, 0, 0) url("news_image_04.jpg") no-repeat scroll 0 0 / 100% 100%;
  border: 1px solid black;
  float: none; /* make the float none */
  height: 150px;
  margin: 0 auto;
}


#right
{
  background: url("news_image_03.jpg") no-repeat;
  background-size: 100% 100%;
  height: 150px;
   border:1px solid purple;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
      <div id="left" class="col-md-6">
       <div id="leftin" class="col-md-6"></div>
       </div>
    <div id="right" class="col-md-6"></div>
    </div>

Answer 2

对于leftin，删除class =“col-md-6”并添加宽度50％

VarTypeMask

Answer 3

将类添加到id为leftin的col-md-offset-3 div 如下所示

<div id="leftin" class="col-md-6 col-md-offset-3"> </div>

已更新为您的示例

＆＃13;

#left
{

 height: 150px;
}
#leftin
{
 background: url(news_image_04.jpg) no-repeat;
 background-size: 100% 100%;
 height: 150px;
 margin: 0 auto;
 }
#right
{
  background: url("news_image_03.jpg") no-repeat;
  background-size: 100% 100%;
  height: 150px;
 }

＆＃13;

<div class="row">
      <div id="left" class="col-md-6">
       <div id="leftin" class="col-md-6 col-md-offset-3"></div>
       </div>
    <div id="right" class="col-md-6"></div>
    </div>

＆＃13;

使用bootstrap在一行类中只获得一个分区中心

3 个答案: