Diskuze: Bootstrap/bílé místo na pravé straně

HTML a CSS Webdesign Bootstrap/bílé místo na pravé straně American English version English version

Aktivity (1)
Avatar
Martin Štěpaník:30. července 13:35

Dobrý den, googlil jsem ale marně. Na pravé straně mám bílé místo, což vypadá například na telefonu nepěkně. Jak to odstraním? setkal jste se s tím někdo?

<!DOCTYPE html>
<html lang="cs-cz">
<head>
  <title>Bootstrap Website Tutorial</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="css3.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="skript.js"></script>
  <script src="skills.js"></script>

</head>
<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <img class="navbar-brand" src="img/hacker.png">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#domu">Domů <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#kdojsem">Kdo jsem</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#dovednosti">Dovednosti</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" a href="#kontakt">Formulář</a>
        </li>
      </ul>




    </div>
  </nav>



<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="img/carousel1.jpeg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/carousel2.jpeg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/carousel.jpeg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">zpět</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">další</span>
  </a>
</div>

<div class="carousel-caption">
  <h1>  </h1>
</div>
<div class="container" id="kdojsem">
  <h1>O mně</h1>
  <p>Vítám vás na svém osobním port.
      </p>
  <img src="img/ja1.jpg" id="obrazek1">
</div>
<div class="row1">
<div class="znalosti" id="dovednosti">
  <h1> Znalosti </h1>
</div>
</div>

<!-- #intro -->
s
<div class="card-group">
  <div class="row" id="karty">
    <div class="col-sm-3">
      <div class="flip">
        <div class="card text-white bg-success mb-3"style="height: 20rem;">
          <div class="face front">
            <div class="inner">
              <img src="img/php.png" id="img1">
              <h2> PHP </h2>
            </div>
          </div>
          <div class="face back">
            <div class="inner text-center">
              <h3>Improved efficiency through automation</h3>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="flip">
        <div class="card text-white bg-warning mb-3"  style="height: 20rem;">
          <div class="face front">
            <div class="inner">
              <img src="img/html5.png" id="img2">
              <h2> HTML5 </h2>
            </div>
          </div>
          <div class="face back">
            <div class="inner text-center">
              <h3>Improved efficiency through automation</h3>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="flip">
        <div class="card text-white bg-secondary mb-3" style="height: 20rem;">
          <div class="face front">
            <div class="inner">
              <img src="img/css33.png" id="img3">
              <h2 id="nadpishtml"> CSS3 </h2>
            </div>
          </div>
          <div class="face back">
            <div class="inner text-center">
              <h3>Improved efficiency through automation</h3>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="flip">
        <div class="card text-white bg-danger mb-3"style="height: 20rem;">
          <div class="face front">
            <div class="inner">
              <img src="img/mysql.png" id="img4">
              <h2> MySQL </h2>
            </div>
          </div>
          <div class="face back">
            <div class="inner text-center">
              <h3>PHP</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

  <div class="container" id="progres">


    <div class="skillbar clearfix " data-percent="95%">
      <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
      <div class="skillbar-bar" style="background: #e67e22;"></div>
      <div class="skill-bar-percent">95%</div>
    </div> <!-- End Skill Bar -->

    <div class="skillbar clearfix " data-percent="95%">
      <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span></div>
      <div class="skillbar-bar" style="background: #3498db;"></div>
      <div class="skill-bar-percent">95%</div>
    </div> <!-- End Skill Bar -->

    <div class="skillbar clearfix " data-percent="90%">
      <div class="skillbar-title" style="background: #2c3e50;"><span>Bootstrap</span></div>
      <div class="skillbar-bar" style="background: #2c3e50;"></div>
      <div class="skill-bar-percent">90%</div>
    </div> <!-- End Skill Bar -->

    <div class="skillbar clearfix " data-percent="50%">
      <div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
      <div class="skillbar-bar" style="background: #5a68a5;"></div>
      <div class="skill-bar-percent">60%</div>
    </div> <!-- End Skill Bar -->

    <div class="skillbar clearfix " data-percent="80%">
      <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
      <div class="skillbar-bar" style="background: #525252;"></div>
      <div class="skill-bar-percent">80%</div>
    </div> <!-- End Skill Bar -->

    <div class="skillbar clearfix " data-percent="60%">
      <div class="skillbar-title" style="background: red;"><span>MySQL</span></div>
      <div class="skillbar-bar" style="background: red;"></div>
      <div class="skill-bar-percent">70%</div>
    </div> <!-- End Skill Bar -->

  </div>

  <div class="container " id="formular">
    <h1 id="form">Kontakt</h1>
      <p>Můžete mě kontaktovat pomocí formuláře níže.</p>

      <?php
      if ($hlaska)
      echo('<p>' . $hlaska . '</p>');
      ?>

      <form method="POST">
        <div class="form-group" id="kontakt">
          <div class="row" id="row1">
          <div class="col-md-4 mb-4">
            <label for="validationCustom01">Jméno</label>
            <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>

          </div>

          <div class="col-md-4 mb-4">
            <label for="example-date-input" class="col-md col-form-label">Datum</label>
            <input class="form-control" type="date" value="2018-06-19" id="datum">
          </div>
          <div class="col-md-4 mb-4">
            <label for="validationCustomUsername">Email</label>

            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroupPrepend">@</span>
              </div>
              <input type="text" class="form-control" id="validationCustomUsername" placeholder="email" aria-describedby="inputGroupPrepend" required>

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

        <div class="form-group">
          <label for="comment">Zpráva</label>
          <textarea class="form-control" rows="4" ></textarea>
        </div>
        <button class="btn btn-primary" type="submit">Odeslat</button>
      </form>
      </div>


      <footer class="footer">

        <!-- Copyright -->
        <div class="footer-text text-left py-3">© 2018 Copyright: Ladaml
          <a Aladin</a>
              <a href="#" title="Facebook" class="btn btn-facebook btn-lg"><i class="fa fa-facebook fa-fw"></i> Facebook</a>
        </div>


      </footer>






  <script>
  $('.flip').hover(function(){
    $(this).find('.card').toggleClass('flipped');

  });
  </script>

</body>

</html>
.navbar
{
  margin-bottom: 0;
  border-radius: 0;
  background-color: #2b2b2e;
  color: black;
  padding: 7px 11px;
  font-size: 2.2em;
  width:auto;
  border: 5px;

}
#navbarText
{
  float: right;
  margin-left:20%;
  font-style: oblique;
}
.navbar-brand
{

  float:left;
  min-height: 30px;
  padding: 13px 15px 5px;
}
.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus,
.navbar-inverse .navbar-nav .active a:hover
{
  color: #FFF;
  background-color: black;
}
.navbar-inverse .navbar-nav li a
{

  color: #dddce0;
}

#icon
{
  max-width: 200px;
  margin: 1% auto;
}
.container
{
  margin: 4% auto;
}
.carousel-caption
{
top: 80%;
transform: translateY(-50%);
text-transform: uppercase;
}


#myBtn:hover {
background-color: #555;
}


#ikona
{
  max-width: 150px;
  margin: 5% auto;
}
body
{
  background-color:#dddce0;


}

#obrazek1
{
  border-radius: 5px;
  margin-top: 5%;
}

h1
{
  font-style: italic;
  font-size: 5em;
  text-align: center;
}


h2
{
font-style: italic;
font-size: 4em;
font-weight: bold;
color: black;
font-family: "Times News Roman";
}

#kdojsem
{
  padding: 7%;
  margin-top: 10%;
  text-align: center;
  border-style: solid;
  background-color: white;
  border-radius: 20px;

}
#formular
{
padding: 7%;
margin-top: 5%;
text-align: center;
border-style: solid;
background-color: white;
border-radius: 20px;
}

#dovednosti

{

  margin-top: 8%;
  text-align: center;

}

#obrazek

{
  max-width: 150px;
  margin-left: 20%;
}
#obrazek2

{
  max-width:150px;
  margin-top :5%;
  margin-left: 20%;
}
#karty{


margin-left: 2%;
width:100%;
}


.card

{

margin-left:3%;
margin-right: -2%;
margin-top:1%;
border-radius:10px;
max-height:50rem;

}
.card-group
{
  margin-top:5%;

}


/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2);

}

/* Add some padding inside the card container */


#img1
{
  max-width:210px;
  margin-left: %;
  margin-top: 3%;

}
#img2
{
  max-width:210px;
  margin-left: %;
  margin-top: 5%;

}
#img3
{
  max-width:210px;
  margin-left: %;
  margin-top: 5%;
}
#img4
{
  max-width:210px;
  margin-left: %;
  margin-top: 5%;
}

.flip {
  -webkit-perspective: 800;
  perspective: 800;
  position: relative;
  text-align: center;
}
.flip .card.flipped {
  -webkit-transform: rotatey(-180deg);
  transform: rotatey(-180deg);
}
.flip .card {
  width: 270px;
  height: 178px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.5s;
  background-color: #fff;

}
.flip .card .face {
  -webkit-backface-visibility: hidden ;
  backface-visibility: hidden ;
  z-index: 2;
}
.flip .card .front {
  position: absolute;
  width: 270px;
  z-index: 1;
}
.flip .card .img {
  position: relaitve;
  width: 270px;
  height: 80px;
  z-index: 1;
  border: 2px solid #000;
}
.flip .card .back {
  padding-top: 10%;
  -webkit-transform: rotatey(-180deg);
  transform: rotatey(-180deg);
}
.inner{margin:0px !important;
}
.container-fluid
{
  margin-top:20%;
  border-style: solid;

}
table
{
  border-style: solid;
  margin-left: 15%;
  width: 500px;
  font-size: 2.5em;
  font-weight: normal;

}

.center
{

}
textarea
{
  width: 300px;
  height:20%;
  float:center;

}

.form-group
{
  margin-left:;
}
#progres
{

  width: 1000px;
}


.skillbar {
  position:relative;
  display:block;
  margin-bottom:15px;
  width:100%;
  background:#eee;
  height:55px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  -webkit-transition:0.4s linear;
  -moz-transition:0.4s linear;
  -ms-transition:0.4s linear;
  -o-transition:0.4s linear;
  transition:0.4s linear;
  -webkit-transition-property:width, background-color;
  -moz-transition-property:width, background-color;
  -ms-transition-property:width, background-color;
  -o-transition-property:width, background-color;
  transition-property:width, background-color;
}

.skillbar-title {
  position:absolute;
  top:0;
  left:0;
  width:110px;
  font-weight:bold;
  font-size:18px;
  color:#ffffff;
  background:#6adcfa;
  -webkit-border-top-left-radius:3px;
  -webkit-border-bottom-left-radius:4px;
  -moz-border-radius-topleft:3px;
  -moz-border-radius-bottomleft:3px;
  border-top-left-radius:3px;
  border-bottom-left-radius:3px;
}

.skillbar-title span {
  display:block;
  background:rgba(0, 0, 0, 0.1);
  padding:0 20px;
  height:55px;

  line-height:55px;
  -webkit-border-top-left-radius:3px;
  -webkit-border-bottom-left-radius:3px;
  -moz-border-radius-topleft:3px;
  -moz-border-radius-bottomleft:3px;
  border-top-left-radius:3px;
  border-bottom-left-radius:3px;
}

.skillbar-bar {
  height:55px;
  width:0px;
  background:#6adcfa;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}

.skill-bar-percent {
  position:absolute;
  right:10px;
  top:0;
  font-size:20px;
  height:55px;
  line-height:35px;
  color:#ffffff;
  color:rgba(0, 0, 0, 0.4);
}

#row1
{
  height: 200px;

}
.footer
{
  background-color: #2b2b2e;
  width:100%;
  height: 100px;

}
.footer-text
{
  color: red;
}
.btn-facebook {
          background: #3B5998;
          border-radius: 0;
          color: #3B5998;
          border-width: 1px;
          border-style: solid;
          border-color: #263961;
    margin-left:32%;
        }
        .btn-facebook:link, .btn-facebook:visited {
          color: #fff;
        }
        .btn-facebook:active, .btn-facebook:hover {
          background: #3B5998;
          color: blacks;
        }
 
Odpovědět 30. července 13:35
Avatar
David Hynek
Redaktor
Avatar
David Hynek:30. července 14:15

Na začátku vše vynuluj:

* { padding: 0; margin: 0; }

Asi by se to tak dělat nemělo, ale já to tak dělám...

Nahoru Odpovědět 30. července 14:15
Čím víc vím, tím víc věcí nevím.
Avatar
Odpovídá na Martin Štěpaník
Jaroslav Smrž:30. července 14:31

Ahoj, postup jaký psal David Hynek je samozřejmě možný, ovšem není to tak správné. Osobně bych doporučoval obalit buď jednotlivé části nebo klidně celou stránku třídou bootstrap <div class="container-fluid"> a do ni teprve umístit obsah. container-fluid je plně responzivní. Ještě dalším řešením je vše vynulovat na začátku. Napr.
<style>
.row {
padding-top: 0;
padding-left: 0;
margin: 0;
}

.col-sm-3 {
padding-top: 0;
padding-left: 0;
margin: 0;
}
</style>

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 30. července 14:31
Avatar
Martin Štěpaník:30. července 15:10

Super! pomohlo, děkuji.

 
Nahoru Odpovědět 30. července 15:10
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.