类no-gutter /相应的CSS没有删除列之间的间隙

时间：2018-04-13 22:25:17

标签： html css twitter-bootstrap bootstrap-4

我使用Bootstrap 4将一些图像添加到一行中的两列。第一列和第二列之间存在间隙，导致我的图像之间出现不必要的间距（如下所示）。我希望第二个和第三个图像之间的间距在第一个和第二个（以及第三个和第二个）之间是相同的。

gap

我尝试按照Bootstrap 4 documentation上的指示查看no-gutters类，将其添加到行div以及后面的CSS中，它们没有做任何事情（也许我应该这样做改变什么？）：

#include <iostream>
#include <fstream>
#include<string>

using  namespace std;

int main() {

  std::cout << "Hello World!\n";

  ifstream file("text.dat");


    if(file.is_open()){

    cout<<"File opened successfully..."<<endl;


    string str,user,m_user,to_user,tweet,reply;

    bool flag=false;

    getline(file,str,'\n');
    cout<<str<<endl;

    if(str.find("@")) flag=true;
    cout<<"'@' is here!!!!: "<<str.find('@')<<endl;
    cout<<"Why the place is showing the presence of the @"<<endl;

    if(flag){
        m_user = str.substr(0,str.find('@'));
        to_user = str.substr(str.find('@')+1,str.find(' ')-1);
        reply = str.substr(str.find(to_user)+to_user.length());

        if(m_user!=to_user)
        {
        cout<<"user : "<<m_user<<endl;
        cout<<"to : "<<to_user<<endl;;
        cout<<"reply : "<<reply<<endl;
        }

    }

    else{
        user=str.substr(0,str.find(' '));
        tweet=str.substr(str.find(' '));   
      cout<<user<<":"<<tweet<<endl;

    }

  //    file.close();
    }
    else{
        cout<<"Error while opening file..."<<endl;
    }
}

我也试过（suggested elsewhere）这个，也没有做任何事情：

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

此外，这是相关的HTML：

.row.no-gutters {
   margin-right: 0;
   margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
   padding-right: 0;
   padding-left: 0;
}

查看CodePen以获取完整代码。

1 个答案:

答案 0 :(得分：1)

no-gutters是必要的，但现在的问题是对齐。您正在使用text-center使图像居中于每个列。解决方案是将所有图像放在相同的col

中 
 <div class="row text-center no-gutters">
  <div class="col">
    <img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">

    <img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">

    <img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">

    <img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
    </div>
 </div>

或者更改每个col的文本对齐但是您需要在小型设备上重新调整它：

<div class="row  no-gutters">
      <div class="col text-right">
        <img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">

        <img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
   </div>
   <div class="col text-left">

        <img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">

        <img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
        </div>
   </div>

第一个解决方案的完整代码：

body {
  margin-top: 2em;
  font-family: "Raleway", sans-serif;
}

h1 {
  text-transform: uppercase;
}

.jumbotron {
  text-align: center;
}

img {
  margin: 1em;
  width: 90%;
}

img.works {
  height: 300px;
  width: auto;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

blockquote {
  text-align: left;
  /* text-align: center (applied to .jumbotron) requires an element to be inline or contain text as direct child descendant to be functional. Since blockquote's text is inside block-level elements <p> and <footer>, setting it to display: inline-block is a workaround. Note also block is needed for top/bottom margins to appear */
  display: inline-block;
  font-family: Georgia, serif;
  font-style: italic;
  margin: 4em 0;
  padding: 0.35em 2.5em;
  line-height: 1.45;
  position: relative;
  color: #383838;
}

blockquote p {
  font-size: 1em !important;
}

blockquote:before {
  display: block;
  padding-left: 10px;
  content: "\201C";
  font-size: 3em;
  /* Element with abolute positioning is positioned relative to nearest positioned ancestor */
  position: absolute;
  /* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
  left: -3px; /* Negative moves it left */
  top: -13px; /* Negative moves it toward top */
  color: #7a7a7a;
}

blockquote cite {
  color: #999;
  font-size: 14px;
  margin-top: 5px;
}

ul {
  /* text-align: center, applied to parent jumbotron class, only works on inline elements; applying this ensures ul is centered */
  display: inline-block;
  text-align: left;
  /* Bottom set to 4em to match margin above ul created by blockquote */
  margin-bottom: 4em;
  list-style: none;
}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>David Hume</title>
  <!-- Ensures proper rendering and touch zooming -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Provides a responsive, fixed-width container. Needed as outermost wrapper in order for Bootstrap grid system to work correctly -->
  <div class="container">
    <!-- Big grey box for calling extra attention to content -->
    <div class="jumbotron">

      <div class="row">
        <!-- Using a single col in a row, Bootstrap automatically creates a single column (works for all devices) -->
        <div class="col">

          <h1>David Hume</h1>
          <h6>Philosopher, Historian, Economist, and Essayist</h6>

          <div class="card">
            <div class="card-body">
              <img src="https://cdn.theatlantic.com/assets/media/img/2015/09/03/BOB_Essay_Opener_WEBCrop/1920.jpg?1441298243" alt="Portrait of David Hume">
              <div class="caption text-secondary">"Portrait of David Hume," 1754, by Allan Ramsay</div>
            </div>
          </div>

          <blockquote>
          <p>A wise man proportions his belief to the evidence.</p>
          <footer class="blockquote-footer"><cite>David Hume</cite></footer>
          </blockquote>

          <h6>A brief timeline in events of David Hume's life:</h6>
          <br>
          <ul>
            <li><strong>1711</strong> – Born as David Home in Edinburgh, Scotland</li>
            <li><strong>1713</strong> – Father dies</li>
            <li><strong>1723</strong> – Enrolls at University of Edinburgh at the age of 12 (14 was typical)</li>
            <li><strong>1734</strong> – Changes surname to Hume</li>
            <li><strong>1739</strong> – Publishes Books 1 and 2 of <em>A Treatise on Human Nature</em></li>
            <li><strong>1748</strong> – Publishes <em>An Enquiry Concerning Human Understanding</em></li>
            <li><strong>1751</strong> – Publishes <em>An Enquiry Concerning the Principles of Morals</em></li>
            <li><strong>1776</strong> – Dies at the age of 65</li>
          </ul>

        </div>
      </div> <!-- End of row div -->

      <div class="card">
        <div class="card-header">
          <h3 class="text-center">Works</h3>
        </div>
        <div class="card-body">
          <!-- Class no-gutters removes gutters (gaps) between column content -->
          <div class="row text-center no-gutters">
            <!-- Using two col classes; Bootstrap automatically creates two equal-width columns for all devices -->
            <div class="col">
            <img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">

            <img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
      
            <img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">

            <img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
            </div>

          </div>
        </div>
      </div>

      <div class="row">
        <div class="col">

          <blockquote>
          <p>Be a philosopher; but, amidst all your philosophy, be still a man.</p>
          <footer class="blockquote-footer"><cite>David Hume</cite></footer>
          </blockquote>

          <h6>Learn more on <a href="https://en.wikipedia.org/wiki/David_Hume" target="_blank">Wikipedia</a>.</h6>
        </div>
      </div>

    </div> <!-- End of jumbotron div -->

  </div> <!-- End of container div -->

    <footer class="text-center">
    <hr>
    <p>Written and coded by <a href="https://www.linkedin.com/in/natalie-cardot/" target="_blank">Natalie Cardot</a></p>
    </footer>

</body>
</html>

相关问题
最新问题