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

Martin Štěpaník

Člen

Martin Štěpaník:30.7.2018 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.7.2018 13:35

David Hynek

Tvůrce

David Hynek:30.7.2018 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.7.2018 14:15

Čím víc vím, tím víc věcí nevím.

Jaroslav Smrž

Tvůrce

Jaroslav Smrž:30.7.2018 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í
+2,50 Kč

Nahoru Odpovědět

30.7.2018 14:31

/* Life runs on code */

Martin Štěpaník

Člen

Martin Štěpaník:30.7.2018 15:10

Super! pomohlo, děkuji.

Nahoru Odpovědět

30.7.2018 15:10

Naučíme tě pracovat na home-office.

Zjistit více...

Naučíme tě pracovat na home-office.

Více info »

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.