Question

我有一个<ul>图像，我希望水平居中显示，内联但它会向右浮动一点，并使我的窗口大小略高于100％宽度。这是一个FIDDLE，您可能需要稍微向外滚动才能看到它。

这是ul：

<div class="row graybackground margin-top-60">
  <section id="menuimages" class="margin-top-60">

     <ul class="margin-top-60">
        <li class="col-md-4 col-sm-6">
           <div class="menubg" style="background-image: url({{ URL::asset('img/training/18911510_m.jpg'); }})">
               <span>{{ link_to('index/#training', 'TRAINING') }}</span>
           </div>
        </li>
        <li class="col-md-4 col-sm-6">
           <div class="menubg" style="background-image: url({{ URL::asset('img/taste/20360155_m.jpg'); }})">
               <span>{{ link_to('index/#eat', 'TASTE') }}</span>
           </div>
        </li>
        <li class="col-md-4 col-sm-6">
           <div class="menubg" style="background-image: url({{ URL::asset('img/relax/14824877_s.jpg'); }})">
                <span>{{ link_to('index/#relax', 'RELAX') }}</span></div>
         </li>
     </ul>

   </section>

</div>

，这里是CSS：

.graybackground {
    background: rgba(0,0,0,0.15);
    padding: 50px;
}
.margin-top-60 {
    margin-top:60px;
}
.menubg a {
    margin-top:20px;
    margin-left: 20px;
    display: inline-block;
    font-size: 1.7em;
    font-weight: bold;
    color: #f5f5f5;
    background: rgba(0,0,0,0.5);
    border-radius: 5px;
    padding:2px 4px;

}
.menubg a:hover {
    text-decoration: none;
}

无论我在哪里添加边距或填充等等，它都不会移动和适合。

我正在使用bootstrap 3。

有人可以协助吗？

Answer 1

溢出超过100％的页面是由于.row上的负边距 - 这对于bootstrap的嵌套网格如何工作很重要。将整个事物包裹在.container中将为您纠正此问题（它会向外部添加填充以消除负边距）。

至于ul偏离中心，只需在开始添加之前对其及其嵌套li进行简单重置：

http://jsfiddle.net/8b6trqgj/4/

Answer 2

添加

max-width: 100%;
margin: 0;

到.graybackground

Fiddle

Answer 3

我解决了将左侧填充删除到 ul 并添加与@Brian相同的规则：

#menuimages ul {
    padding-left: 0;
}

.graybackground {
    background: rgba(0,0,0,0.15);
    padding: 50px;
    margin:0;
    max-width: 100%;
}

Fiddle

带图像的ul不能正确居中

3 个答案: