Kenar çubuğum sayfamın sağına değil, sol tarafıma gidiyor. Bunu nasıl düzeltirim?

Ben html/css ve bootstrap için nispeten yeni. Bir blog sitesi oluşturmaya çalışıyorum, ancak kenar çubuğum sayfamın altına gider ve benim hakkım değil. Bunu nasıl düzeltirim? Ve ben ne yapıyorum yanlış?Kenar çubuğum sayfamın sağına değil, sol tarafıma gidiyor. Bunu nasıl düzeltirim?

aşağıda ve keman olarak 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%; 
    } 
}

kaynak

2016-03-21 Mila

teşekkürler, çocuklar yardımcı ve bana verdi cevabı yanlış bir şey var mı – Mila

benim kodu var, http kullanıyordu: // yerine https: // bilgisinin önyükleme kaynaklar için. JSFiddle ile https: // kullanımı açıkça açıktır. Bootstrap'tan stiller uygulanmıyordu.

Ve gibi olabilir için aradığınız gibi iki sütun var:

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

kaynak

2016-03-21 02:34:09

-1

ben this fiddle size yardımcı olacağını umuyoruz.

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

kaynak

2016-03-21 02:50:50

biraz daha fazla yardımcı olmak için? –

Kenar çubuğum sayfamın sağına değil, sol tarafıma gidiyor. Bunu nasıl düzeltirim?

cevap

İlgili konular