Question

我在AngularJS范围变量中有一些项目列表。我想将它们并排显示在浏览器屏幕上，直到窗口宽度，然后在下一行。它们看起来像这样。

enter image description here

我想要一个5px的填充;从两个方面之间的所有方面。

如何使用bootstrap / css做到这一点。 Bootstrap将是首选。

Answer 1

您可以将它们放在容器中（不是必需但可以保持代码清洁）并在容器上设置text-align: center。然后，其中每一个都可以有一个display:inline-block（如果你希望它们全部排成一行，否则会忽略text-align: center尝试在小提琴中查看差异）

请注意，您margin的{{1}}有2个选项，您可以设置为仅限{0}，也可以只留下5px，或者将左右设置为{ {1}}。如果您希望它们看起来更“居中”，我建议您添加约5px的左右填充，以便加起来2-3px

您将获得this page上显示的结果。

或here's a fiddle。

Fiddle没有2px。

Answer 2

您可以通过提供display: inline-block;和padding: 5px;这些项目来实现这一目标，以保持您想要的差距。

以下是您需要的代码：

.box {
    padding : 5px;
    display : inline-block;
    min-width: 100px;
    min-height: 50px;
    background-color: red;        
}

  
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

您可以调整窗口大小以查看其差异以及它们的动态行为。

调整此DEMO Fiddle中的结果窗口以获得最佳效果。

Answer 3

请看下面，希望你想要这个。

＆＃13;

ul {
  max-width: 500px;
  font-size: 0;
  margin: 0 auto;
}
ul > li {
  display: inline-block;
  width: 100px;
  height: 150px;
  background: black;
  margin: 5px;
  list-style: none;
  vertical-align: top;
}

＆＃13;

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

＆＃13;

Answer 4

您可以在框中应用以下CSS：

display:inline-block;
vertical-align:top;

Answer 5

你想要什么。

JSFIDDLE：http://jsfiddle.net/BradleyIW/9v7ptryL/

在col-xs-2类中使用bootstrap row类。全部包含在container类中。全部<div> s。

<div class="container">
<div class="row">
        <div class="col-xs-2">
            <p> item </p>
             <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
           <button class="btn btn-default"> btn 1</button>
        </div>
        <div class="col-xs-2">
            <p> item </p>
            <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
            <button class="btn btn-default">btn 2</button>
        </div>
        <div class="col-xs-2">
            <p> item </p>
            <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
            <button class="btn btn-default">btn 3</button>
        </div>
        <div class="col-xs-2">
            <p> item </p>
            <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
            <button class="btn btn-default">btn 4</button>
        </div>
        <div class="col-xs-2">
            <p> item </p>
            <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
            <button class="btn btn-default">btn 5</button>
        </div>
        <div class="col-xs-2">
            <p> item </p>
            <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
            <button class="btn btn-default">btn 6</button>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-2">
            <p> item </p>
            <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
            <button class="btn btn-default">btn 7</button>
        </div>
        <div class="col-xs-2">
            <p> item </p>
           <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
           <button class="btn btn-default">btn 8</button>
        </div>
        <div class="col-xs-2">
            <p> item </p>
            <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
<button class="btn btn-default">btn 9</button>
        </div>
        <div class="col-xs-2">
            <p> item </p>
            <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
            <button class="btn btn-default">btn 10</button>
        </div>
        <div class="col-xs-2">
            <p> item </p>
            <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
            <button class="btn btn-default">btn 11</button>
        </div>
        <div class="col-xs-2">
            <p> item </p>
           <img src="http://www.school-adventures.co.uk/expedition-photo-galleries/morocco/gallery/thumb_morocco_image15.jpg" class="img-responsive" alt="image"> 
            <button class="btn btn-default">btn 12</button>
        </div>
    </div>
</div>

CSS：

    .col-xs-2 {padding-left:5px; padding-right:5px;}
    .row {margin-top:5px;}
    p {margin:auto; text-align:center;}

    img {margin:auto;}
    button {margin-top:5px;}

如何并排显示项目直到窗口宽度然后在下一行

5 个答案: