个人中心
gpt4 book ai didi

html - 当我放大屏幕时，让 Twitter-Bootstrap 的缩略图在响应式网格布局中水平(横向)布局

转载 作者：行者123 更新时间：2023-11-28 06:25:21 25 4
gpt4 key购买 nike

现在我终于在网格布局中的这些 Twitter-Bootstrap 缩略图中完成了所有元素和表单(我需要重新创建一个模型)它们并没有并排堆叠当我把屏幕变大时(当屏幕变大时，我需要它们并排均匀地堆叠；当屏幕变小时，我需要它们均匀地叠放在一起)。在我将所有这些元素添加到位之前，他们正在这样做，我不明白为什么现在不这样做，我一遍又一遍地检查我的代码。

此外，每个缩略图上的布局看起来都有些不同(我希望它们看起来像最后一个带有新西兰人的缩略图)，尽管我已经一遍又一遍地检查我的代码，并且可以找不到区别，它们对元素使用相同的 CSS。

[我想如果我不能找出它们看起来不同的原因，我需要找到一种方法在底部按钮周围获得更多空间，如何使标题部分(表单和按钮所在的位置)显示得更远向下移动页面并去除缩略图周围的白色边框 - 我已经尝试更改 CSS 中的许多元素，但找不到操作它的方法。]

代码如下:HTML:

<body>
<header></header>
 <main>
  <div class="container-fluid">
    <div class="row">
     <div class="col-sm-4">
      <p class="above lead">Assorted Vegetables (1lb)</p>
        <div class="thumbnail">
         <img class="card-img-top img-responsive" img src="http://i.imgur.com/uDhJgqo.jpg" alt="peppers">
          <div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend class="text-muted">$1.00</legend>
<span class="quant"><p><label for="quant" class="text-muted">QTY</label>
 <input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline">Total:$<output name="amount" for="quantity"></output></span>
</form>
</div>
                    <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
             </div>
        </div>
      </div>
    <div class="col-sm-4">
      <p class="above lead">Assorted Vegetables (1lb)</p>
        <div class="thumbnail">
          <img class="card-img-top img-responsive" img src="http://i.imgur.com/mv2lo0S.jpg" alt="raspberry">
          <div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (2.50))">
<legend class="text-muted">$2.50</legend>
<span class="quant"><p><label for="quant" class="text-muted">QTY</label>
 <input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline">Total:$<output name="amount" for="quantity"></output></span>
</form>
</div>
              <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
      <p class="above lead">Assorted Vegetables (1lb)</p>
        <div class="thumbnail">
           <img class="card-img-top img-responsive" img src="http://i.imgur.com/fd6Ybmb.jpg" alt="kiwi">
          <div class="caption">
        <form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (.3))">
<legend class="text-muted">$.30</legend>
<span class="quant"><p><label for="quant" class="text-muted">QTY</label>
 <input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline">Total:$<output name="amount" for="quantity"></output></span>
</form>
                    <p><button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button></p>
          </div>
        </div>
      </div>

</main>
</body>

CSS:

body { background: #3ca7c4; /* Old browsers */
//background: -moz-linear-gradient(top,  #3ca7c4 12%, #54b5d0 45%, #32879e 100%); /* FF3.6-15 */ 

      background-image: -webkit-linear-gradient(top,  #3ca7c4 12%,#54b5d0 45%,#32879e 100%); /* Chrome10-25,Safari5.1-6 */
      background-image: linear-gradient(to bottom,  #3ca7c4 12%,#54b5d0 45%,#32879e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ca7c4', endColorstr='#32879e',GradientType=0 ); /* IE6-9 */
}
header { padding-top: 80px; }
.thumbnails > li { border:0; }
.thumbnail {
    border: 0 none;
    box-shadow: none;
}
legend { float: left;
         margin-top: 25px;
         padding-top: 15px;
         margin-bottom: 5px;
}

.caption { background-color: #f1f1f1;
           border: none;
}

.above { text-align: left;
         color:#ffffff;
}

form > * { line-height: 2em; 
           border: none;
           background-color: #f1f1f1;
}
.inline { display: inline;
          color: #3c763d;
}
.quant { text-align: right;
            max-width: 40em;
            float: right;
}

最佳答案

你的结构不对；您在第一列和第二列的末尾有额外的关闭 div 标签，而不是关闭容器流体和行。就缩略图的一致性而言，您的最后一个(带有 Kiwi)在按钮之后关闭了标题类，另外两个在按钮之前。

请参阅 FullPage 上的示例代码段。

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3ca7c4+12,54b5d0+45,32879e+100 */

body {
  background: #3ca7c4;
  /* Old browsers */
  //background: -moz-linear-gradient(top,  #3ca7c4 12%, #54b5d0 45%, #32879e 100%); /* FF3.6-15 */  background-image: -webkit-linear-gradient(top, #3ca7c4 12%, #54b5d0 45%, #32879e 100%);
  /* Chrome10-25,Safari5.1-6 */
  background-image: linear-gradient(to bottom, #3ca7c4 12%, #54b5d0 45%, #32879e 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3ca7c4', endColorstr='#32879e', GradientType=0);
  /* IE6-9 */
}
header {
  padding-top: 80px;
}
.thumbnails > li {
  border: 0;
}
.thumbnail {
  border: 0 none;
  box-shadow: none;
}
legend {
  float: left;
  margin-top: 25px;
  padding-top: 15px;
  margin-bottom: 5px;
}
.caption {
  background-color: #f1f1f1;
  border: none;
}
.above {
  text-align: left;
  color: #ffffff;
}
form > * {
  line-height: 2em;
  border: none;
  background-color: #f1f1f1;
}
.inline {
  display: inline;
  color: #3c763d;
}
.quant {
  text-align: right;
  max-width: 40em;
  float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header>
</header>
<main>

  <div class="container-fluid">
    <div class="row">

      <div class="col-sm-4">
        <p class="above lead">Assorted Vegetables (1lb)</p>
        <div class="thumbnail">
          <img class="card-img-top img-responsive" img src="http://i.imgur.com/mv2lo0S.jpg" alt="peppers">
          <div class="caption">
            <form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
              <legend class="text-muted">$1.00</legend>
              <span class="quant"><p><label for="quant" class="text-muted">QTY</label>
 <input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
              <span class="inline">Total:$<output name="amount" for="quantity"></output></span>
            </form>
            <p>
              <button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button>
            </p>
          </div>
        </div>
      </div>

      <div class="col-sm-4">
        <p class="above lead">Assorted Vegetables (1lb)</p>
        <div class="thumbnail">
          <img class="card-img-top img-responsive" img src="http://i.imgur.com/mv2lo0S.jpg" alt="raspberry">
          <div class="caption">
            <form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (2.50))">
              <legend class="text-muted">$2.50</legend>
              <span class="quant"><p><label for="quant" class="text-muted">QTY</label>
 <input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
              <span class="inline">Total:$<output name="amount" for="quantity"></output></span>
            </form>
            <p>
              <button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button>
            </p>
          </div>
        </div>
      </div>

      <div class="col-sm-4">
        <p class="above lead">Assorted Vegetables (1lb)</p>
        <div class="thumbnail">
          <img class="card-img-top img-responsive" img src="http://i.imgur.com/mv2lo0S.jpg" alt="kiwi">
          <div class="caption">
            <form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (.3))">
              <legend class="text-muted">$.30</legend>
              <span class="quant"><p><label for="quant" class="text-muted">QTY</label>
 <input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
              <span class="inline">Total:$<output name="amount" for="quantity"></output></span>
            </form>
            <p>
              <button type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>ADD TO CART</button>
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>

</main>

关于html - 当我放大屏幕时，让 Twitter-Bootstrap 的缩略图在响应式网格布局中水平(横向)布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35330885/

25 4 0
文章推荐： 使用 math.random 的 Javascript 单选按钮鼠标悬停移动图像
文章推荐： html - Drupal 照片不对齐
文章推荐： css - HTML 表格周围无边框
文章推荐： html - 在不影响 JQuery 的情况下将文本垂直居中放置在我的 div 中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com