Question

我对html / css和bootstrap比较新。我正在尝试建立一个博客网站，但我的侧边栏位于我的页面底部，而不是我的右侧。我该如何解决？我做错了什么？

我的代码位于https://jsfiddle.net/Mulk/9tqasmr8/#&togetherjs=T2bw0qcVNw

下方

<!DOCTYPE html>


<title>Pratice</title>

<body>


  <hr id="hrstyle" />

  <!--End of Logp-->
  <!--Start of Blog-->
  <div class="container-fluid blog">
    <div class="row">
      <div class=" col-xs-12 col-sm-offset-1 col-sm-8">
        <div>
          <h3>New Zealand</h3>
          <img class="img-responsive blogpics" src="Images/ocean2.jpg" / />
          <p>
            We have been called many things. Travelers, by default. But we like to be called nomads. Explorers. Vagabonds. Adventurers. Wayfarers.
            <a class="readmore">Read More..</a>
          </p>
        </div>
        <div>
          <h3>Munich Depth</h3>
          <img class="img-responsive blogpics" src="Images/munic2.jpg" />
          <p>
            And that’s just the gist of it.We come from all walks of life, from bustling gray colored cities, sleepy beach towns, snow-covered metropolises, small villages nestled in between lush green mountains, we come from everywhere.
            <a class="readmore">Read More..</a>
          </p>

        </div>

        <!---Sidebar-->
        <div class="col-sm-3">
          <p>
            SideBarLorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, quasi, fugiat, asperiores harum voluptatum tenetur a possimus nesciunt quod SideBar
        </div>

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

</body>











CSS

@import url(https://fonts.googleapis.com/css?family=Crimson+Text);
img {
  max-width: 100%;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #fff;
  font-family: 'Crimson Text', serif;
  line-height: 1.5;
  overflow: scroll;
}

h1,
h2 {
  font-family: 'Lato', sans-serif;
  font-size: 2.5em;
}


/******Naviagtion*********/

nav {
  width: 100%;
}

#hrstyle {
  border-top-color: black;
  color: black;
}


/***End Logo***/


/***Start of Blog***/

h3 {
  text-transform: uppercase;
}

.readmore {
  text-transform: uppercase;
  display: block;
  text-align: center;
  margin-top: 2.5%;
  border-width: 1.5px;
  border-style: solid;
  font-size: 1.1em;
}

.blog {
  font-family: 'Crimson Text', serif;
  font-size: 1.3em;
}

.blogpics {
  width: 100%;
}


/****End of Blog****/

@media only screen and (min-width: 1224px) {
  p {
    width: 835px;
  }
  .blogpics {
    width: 85%;
  }
}

Answer 1

在您的小提琴中，您使用http：//而不是https：//作为引导资源。使用https：//和JSFiddle显然是关键。来自bootstrap的样式没有被应用。

有两个像你正在寻找的列可能是：

＆＃13;

<div class="container">
  <div class="row">
  
    <div class="col-sm-8">
      <div class="row">
        <div class="col-xs-12">
          <div>
            <h3>Title here</h3>
            <img class="img-responsive blogpics" src="http://www.thetorquereport.com/lamborghini_reventon_4.jpg" />
            <p>
                We have been called many things. Travelers, by default. But we like to be called nomads. Explorers. Vagabonds. Adventurers. Wayfarers.
                <a class="readmore">Read More..</a>
              </p>
          </div>
        </div>
        <div class="col-xs-12">
          <div>
            <h3>Title here</h3>
            <img class="img-responsive blogpics" src="http://www.thetorquereport.com/lamborghini_reventon_4.jpg" />
            <p>
                We have been called many things. Travelers, by default. But we like to be called nomads. Explorers. Vagabonds. Adventurers. Wayfarers.
                <a class="readmore">Read More..</a>
              </p>
          </div>
        </div>
      </div>
    </div>
    <!---Sidebar-->
    <div class="col-sm-4">
      <p>
      SideBarLorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, quasi, fugiat, asperiores harum voluptatum tenetur a possimus nesciunt quod SideBar</p>
    </div>
    
  </div>  
</div>

＆＃13;

Answer 2

我希望this fiddle会帮助你。

＆＃13;

<!doctype html>
    <head>
        <title>Practice</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3./css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
    <hr id="hrstyle" />
    <div class='container'>
        
        <div class="row">
          <div class="col-sm-8">
          <div>
              <h3>New Zealand</h3>
              <img class="img-responsive blogpics" src="http://www.thetorquereport.com/lamborghini_reventon_4.jpg" / />
              <p>
                We have been called many things. Travelers, by default. But we like to be called nomads. Explorers. Vagabonds. Adventurers. Wayfarers.
                <a class="readmore">Read More..</a>
              </p>
            </div>
            <div>
              <h3>Munich Depth</h3>
              <img class="img-responsive blogpics" src="http://www.thetorquereport.com/lamborghini_reventon_4.jpg" />
              <p>
                And that’s just the gist of it.We come from all walks of life, from bustling gray colored cities, sleepy beach towns, snow-covered metropolises, small villages nestled in between lush green mountains, we come from everywhere.
                <a class="readmore">Read More..</a>
              </p>

            </div>
          </div>
          <div class="col-sm-4">
          <p>
                SideBarLorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, quasi, fugiat, asperiores harum voluptatum tenetur a possimus nesciunt quod SideBar
          </div>
        </div>
      </div>
    </body>

    </html>

＆＃13;

我的侧边栏不是在我的页面右侧，而是在我的左侧。我该如何解决？

2 个答案: