Question

我正在尝试学习bootstrap，但是我遇到了这部分问题。如果在笔记本电脑（或更高版本）上查看页面，我希望三个容器位于同一行，以页面为中心，并在每个容器之间有一些填充。如果在手机上观看，我希望图像显示在一列中，一列在另一列之下。当我为笔记本电脑或更高版本创建它时，我可以让视图看起来很漂亮，或者我可以让折叠视图看起来很适合手机。麻烦是我无法弄清楚如何让他们一起工作。我已经尝试过使用bootstrap列类.col-md- [某个数字]，但似乎无法使用我的CSS。有人可以帮忙吗？下面是我为笔记本电脑视图创建的链接，我需要在手机或平板电脑上看起来也不错。 example view

  /* need three of these centered on one row, with padding between them (if laptop or higher). */
  <div class="row center">
    <div class="showcase">
        <img alt="Text" src="image.png" height="100" />
        <div class="tabs">
            <h6>Text</h6>
        </div>
        <p>
            Some Text
        </p>
        <a href="#">Click Here</a>
    </div>
  </div>

用于创建三个容器的CSS。。中央 { float：none; margin-left：auto; margin-right：auto; }

.showcase {
   float: none;
 background: url("../images/home-boxes.png") no-repeat;
 height: 324px;
   width: 222px;
   padding-top: 10px;
   font-size: .9em;
   text-align: center;
}

.showcase h6 {
font-weight: bold;
}

.showcase p {
    line-height: 18px;
    text-align: left;
    margin: 5px 5px 5px 5px;
}

Answer 1

如果您使用的是bootstrap，则断点由大，中，小和超小型指定。这些与variables.less文件中设置的像素值有关。它们可以是你想要的任何东西。它们不依赖于设备，所以如果你要使用Bootstrap，你应该开始考虑这些术语。

你的问题描述缺乏一些细节，所以我不确定你的意思是“不好看”。看看你的代码，我立刻就看到你通过设置宽度和高度样式来对抗bootstrap。 bootstrap的主要目的之一是让它为您控制屏幕上对象的宽度和高度。如果你的div太宽或太窄，你可以使用bootstrap框架进行调整。有几种方法可以做到这一点。首先，您可以调整页面的断点。接下来，您可以将容器类设置为更窄的最大宽度，例如960px。那样的事情不会传播那么多。您可以插入在大视图中将元素重新定位在内联行中的间隔div，但隐藏在任何其他视图中。最后，您可以使用填充和边距来控制元素的尺寸。诀窍是使用Bootstrap，而不是反对它。

如果问题只是边距和填充问题，则需要使用与bootstrap相同的中断值的媒体查询。这样填充就会调整到视图，一切看起来都不错。

您可以在自己的LESS文件或CSS文件中使用媒体查询。最好使用LESS文件，因为您可以使用Bootstrap使用的相同变量，但如果您对LESS不满意则不必使用。 Bootstrap 3中的默认断点是：

// Small screen / tablet
@container-tablet:             ((720px + @grid-gutter-width));
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            ((940px + @grid-gutter-width));
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      ((1140px + @grid-gutter-width));
@container-lg:                 @container-large-desktop;

因此，如果您要在CSS中使用这些值与您的展示类，您的媒体查询将如下所示：

//default styles used and large view
.showcase {
background: url("../images/home-boxes.png") no-repeat;
padding-top: 10px;
font-size: .9em;
text-align: center;
}

//medium view styles
@media (min-width: 940px) and (max-width: 1139px) {
.showcase {
padding-top: ?px;
font-size: ?em;
}
}

//small view styles
@media (min-width: 720px) and (max-width: 939px) {
.showcase {
padding-top: ?px;
font-size: ?em;
}
}

//extra-small view styles
@media  (max-width: 719px) {
.showcase {
padding-top: ?px;
font-size: ?em;
}
}

将这些样式与col-md-x等样式结合使用，我将摆脱浮动样式。再次，让bootstrap为你完成工作。

Answer 2

您需要更改层次结构，使其看起来像这样

<div class="row">
 <div class="col-md-4">
  <!--contents-->
 </div> <!--/first column-->

 <div class="col-md-4">
  <!--contents-->
 </div> <!--/second column-->

 <div class="col-md-4">
  <!--contents-->
 </div> <!--/third column-->

</div><!--/row-->

中心三个容器在每一行之间填充

2 个答案: