Question

我使用bootstrap的网格来制作响应式图像库。然而，我不知道为什么每个div都放错了左边，我无法擦除其填充或将图像置于其div see here内。我试过溢出：隐藏;并改变填充和边距。

由于此错误，整个图库不会居中，每行的最后一张图像都会被裁剪到右侧。

我的代码

＆＃13;

ul.gallery{
  overflow: hidden;
  padding-left: 0px;
    display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.presumiendo{
  padding-top: 100px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 2px solid #A59391;
  font-family: 'Merriweather';
  color: #A59391;
  font-weight: 250;
  letter-spacing: 2px;
  margin-left: 0px;
  margin-right: 0px;
}

.align-icon{
  left: 0px;
}

.images-portfolio {
  border-left: 0px;
  margin: 20px 20px 20px 20px;
  display: inline;
  width:100%;
  z-index: 1;
  border-radius: 50%;
  display: inline-block;
  padding-left: 0px;
}

li .li-image{
  padding-left: 0px;
}

.images-center{
  width: 100%;
  padding-bottom: 100px;
  margin-right: 0px;
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
}

.portfolio{
  overflow: hidden;
  padding-bottom: 0px;
}

＆＃13;

<div class="container-fluid">
    <section class="portfolio row">
        <div class="images-center containerimg">
          <div class= "col-lg-12 col-md-12 col-12" style="padding-left: 0px;">
          <ul class="gallery ">
            <div class= "col-lg-3 col-md-4 col-12">
            <li class="li-image"> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li>
            </div>
      <div class= "col-lg-3 col-md-4 col-12">
            <li> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li></div>
       <div class= "col-lg-3 col-md-4 col-12">
            <li> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li></div>
         <div class= "col-lg-3 col-md-4 col-12">
            <li> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li></div>
          <div class= "col-lg-3 col-md-4 col-12">
            <li> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li></div>
          <div class= "col-lg-3 col-md-4 col-12">
            <li> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li></div>
          <div class= "col-lg-3 col-md-4 col-12">
            <li> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li></div>
          <div class= "col-lg-3 col-md-4 col-12">
            <li> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li></div>
           <div class= "col-lg-3 col-md-4 col-12">
            <li> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li></div>
            <div class= "col-lg-3 col-md-4 col-12">
            <li> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li></div>
            <div class= "col-lg-3 col-md-4 col-12">
            <li> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li></div>
            <div class= "col-lg-3 col-md-4 col-12">
            <li> <a href="portoliof1.html" data-title="Ejemplo 1"> <img src="https://thumb.ibb.co/cMrf9x/poster.jpg" class="images-portfolio img-responsive" alt="ejempli 1"> </a> </li></div>
            </div>
        </ul>
      </div>

＆＃13;

谢谢

Answer 1

您没有获得所需结果的原因是错误的html编码。您应该检查如何使用bootstrap以正确的方式编写html和css代码。试试这段代码。

componentWillMount(){


async function getToken() {
  try {
      const value = await AsyncStorage.getItem('access_token');
      if (value !== null){
        console.log(value);

        this.setState({ access_token: value });
      }
    } catch (error) {
      console.log( "Error retrieving data")
    }
  }

  getToken();

Bootstrap div超出了图库中的内容

1 个答案: