Meine Sidebar wird nicht rechts von meiner Seite, sondern zu meiner Linken gehen. Wie behebe ich das?

Ich relativ neu zu HTML/CSS und Bootstrap. Ich versuche, eine Blog-Website zu erstellen, aber meine Seitenleiste geht zum Ende meiner Seite und nicht zu meiner Rechten. Wie behebe ich das? Und was mache ich falsch?Meine Sidebar wird nicht rechts von meiner Seite, sondern zu meiner Linken gehen. Wie behebe ich das?

ich meinen Code unten und bei 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%; 
    } 
}

Quelle

2016-03-21 Mila

Danke, für Jungs helfen und mir ein wenig mehr – Mila

In Ihrer Geige haben, wurden mit Ihnen http: // statt https: // für Ihre Bootstrap-Ressourcen. Die Verwendung von https: // mit JSFiddle ist offensichtlich der Schlüssel. Stile aus dem Bootstrap wurden nicht angewendet.

und zwei Spalten haben, wie sie es sein könnte suchen:

<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>

Quelle

2016-03-21 02:34:09

-1

Ich hoffe this fiddle helfen Ihnen.

<!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>

Quelle

2016-03-21 02:50:50

lernen helfen Gibt es etwas falsch mit der Antwort gab ich? –

Meine Sidebar wird nicht rechts von meiner Seite, sondern zu meiner Linken gehen. Wie behebe ich das?

Antwort

Verwandte Themen