html - 三个图像排列

Question

布局 - 在 bootstrap 网格中排列 3 个图像。 .col-sm-3 没有帮助。我究竟做错了什么？如何实现？我在想 Bootstrap 网格使它与列宽完美地并排在一起。请帮忙!

.navbar {
  min-height: 80px;
  margin-bottom: 0;
}
#btnnavbar {
  margin-top: 20px;
}

#btnhome {
  margin-top: 16px;
}



#imgbrand {
  margin-top: -70px;
  margin-left: px;
  height: 220px;
  width: 280px;
}

#firstpage {
  margin-top: 90px;
}

#parallax { 
  /* The image used */
  padding-top: 200px;
  margin-top: 80px;
  background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478121019/Death_to_stock_photography_Vibrant_7_of_10_s50rcs.jpg");

  /* Set a specific height */
  height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

.about {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.lead {
  font-family: 'Lato', sans-serif;
}

#portfolio {
  height: 500px; 
  padding-top: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <!-- /end-->
  <!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
  <div class="container-fluid">  
    <!-- /end -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
        <!-- For screen readers only -->
        <span class="sr-only">Toggle navigation</span>
        <!-- /end -->
        <!-- Hamburger menu button appears when browser window has been shrinked -->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- /end -->
      <!-- Brand and toggle get grouped for better mobile display -->
      <a class="navbar-brand " href="http://codepen.io/ekilja01"><img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li id="btnhome"><a href="#parallax">About</a></li>
        <li id="btnhome"><a href="#portfolio">Portfolio</a></li>
        <li id="btnhome"><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<section id="parallax">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 text-center">
        <h1 class="about">WEB DEVELOPER</h1>

      </div>
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>

<section id="portfolio">
  <div class="row">
    <div class="col-lg-12 col-md-12 text-center">
      <h1>My skillset</h1>
      <p class="lead"></p>
      <div class="row">
        <div class="col-sm-3">
          <img  src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/html5_yoj7se.png" alt="html"> 
          <div class="col-sm-3">
            <img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/css3_bso6y6.png" alt="css" />
            <div class="col-sm-3">
              <img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/js_mnqfxw.png" alt="javascript" />
              <div class="col-sm-3">
                <img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127237/jquery_qkehtt.png" alt="jquery" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>

Answer 1

.navbar {
  min-height: 80px;
  margin-bottom: 0;
}
#btnnavbar {
  margin-top: 20px;
}

#btnhome {
  margin-top: 16px;
}



#imgbrand {
  margin-top: -70px;
  margin-left: px;
  height: 220px;
  width: 280px;
}

#firstpage {
  margin-top: 90px;
}

#parallax { 
  /* The image used */
  padding-top: 200px;
  margin-top: 80px;
  background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478121019/Death_to_stock_photography_Vibrant_7_of_10_s50rcs.jpg");

  /* Set a specific height */
  height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

.about {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.lead {
  font-family: 'Lato', sans-serif;
}

#portfolio {
  height: 500px; 
  padding-top: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <!-- /end-->
  <!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
  <div class="container-fluid">  
    <!-- /end -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
        <!-- For screen readers only -->
        <span class="sr-only">Toggle navigation</span>
        <!-- /end -->
        <!-- Hamburger menu button appears when browser window has been shrinked -->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- /end -->
      <!-- Brand and toggle get grouped for better mobile display -->
      <a class="navbar-brand " href="http://codepen.io/ekilja01"><img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li id="btnhome"><a href="#parallax">About</a></li>
        <li id="btnhome"><a href="#portfolio">Portfolio</a></li>
        <li id="btnhome"><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<section id="parallax">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 text-center">
        <h1 class="about">WEB DEVELOPER</h1>

      </div>
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>

<section id="portfolio">
  <div class="row">
    <div class="col-lg-12 col-md-12 text-center">
      <h1>My skillset</h1>
      <p class="lead"></p>
      <div class="row">
        <div class="col-sm-3 col-xs-3">
          <img    src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/html5_yoj7se.png" alt="html"> 
</div>
          <div class="col-sm-3 col-xs-3">
            <img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/css3_bso6y6.png" alt="css" />
</div>
            <div class="col-sm-3 col-xs-3">
              <img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/js_mnqfxw.png" alt="javascript" />
</div>
              <div class="col-sm-3 col-xs-3">
                <img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127237/jquery_qkehtt.png" alt="jquery" />

              </div>
            
          
        
      
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>

这应该可行