Question

我正在尝试在页面底部的小尺寸图像上使用图像滑块和其他表格行格式，但如果有任何调整窗口大小的地方，则此表格请居中，如果有解决方案，请帮助我在npm中使用。
HTML：-

    for tuple in array {

print(tuple.object1.name)
print(tuple.object2.name)
print(tuple.number)

}

css：-

<div id="UsefulTipsDataCtrDiv" class="col-sm-12">
            <div class="container">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="width: 5%;background: none">
                        <span class="glyphicon glyphicon-chevron-left" style="color:black;"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <div class="carousel-inner img-responsive"></div>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next" style="width: 5%;background: none">
                        <span class="glyphicon glyphicon-chevron-right" style="color:black;"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <table class="tblsmallImages">
                <tr class="carousel-inner-thumbnails"></tr>
            </table>
      </div>

Answer 1

<div id="UsefulTipsDataCtrDiv" class="col-sm-12">
      <div class="container">
          <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="width: 5%;background: none">
                  <span class="glyphicon glyphicon-chevron-left" style="color:black;"></span>
                  <span class="sr-only">Previous</span>
              </a>
              <div class="carousel-inner img-responsive"></div>
              <a class="right carousel-control" href="#myCarousel" data-slide="next" style="width: 5%;background: none">
                  <span class="glyphicon glyphicon-chevron-right" style="color:black;"></span>
                  <span class="sr-only">Next</span>
              </a>
          </div>
      </div>
      <div class="tblsmallImages">
          <div class="carousel-inner-thumbnails">
            <div class="thumbnail">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
          </div>
      </div>
</div>

$files = $request->file('photo');
$filename = str_random() . '.' . $files->extension();
$files->move(public_path() . '/images/user_profiles/', $filename);

尝试此代码。有时候，如果有任何问题，请告诉我。

Answer 2

.carousel-inner {
  max-height: 430px;
}
.tblsmallImages{
      height:100px;
      bottom: 0!important;
      width: 90%;
      margin:0 5%;
}
.smallImages{
      height:100px;
      margin-right:5px;
      margin-left:5px;

}
.carousel-inner-thumbnails{
      height: auto;
      overflow: auto;
      margin-top: 10px;
      position: relative;
      width: 100%;
      display: flex;
      background-color: #ccc;
      padding: 0 5px;
}

.thumbnail {
  margin:5px 1%;
  }
.thumbnail img {
  width:100%;
  height:auto;
}

/* @media only screen and (max-width: 480px) {
 .thumbnail {
  min-width:31.33%;
  width:auto;
  margin:5px 1%;
  } 
} */

<div id="UsefulTipsDataCtrDiv" class="col-sm-12">
      <div class="container">
          <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="width: 5%;background: none">
                  <span class="glyphicon glyphicon-chevron-left" style="color:black;"></span>
                  <span class="sr-only">Previous</span>
              </a>
              <div class="carousel-inner img-responsive"></div>
              <a class="right carousel-control" href="#myCarousel" data-slide="next" style="width: 5%;background: none">
                  <span class="glyphicon glyphicon-chevron-right" style="color:black;"></span>
                  <span class="sr-only">Next</span>
              </a>
          </div>
      </div>
      <div class="tblsmallImages">
          <div class="carousel-inner-thumbnails">
            <div class="thumbnail">
              <img style="width:150px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img style="width:137px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img style="width:100px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img style="width:125px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img style="width:115px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            
            
            <div class="thumbnail">
              <img style="width:127px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img style="width:135px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img style="width:100px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img style="width:125px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img style="width:135px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
          </div>
      </div>
</div>

尝试使用动态图片滑块

。

固定在底部的位置在css中不起作用

2 个答案: