different sections created in html are placed next to each other in an undesired way, when using bootstrap

Question

different sections created in html are placed next to each other in an undesired way, when using bootstrap

Navigation

#1 by (0 votes)

0

Now try using clear: both; to eliminate floating positioning in case there is and also I put display: block to each section and even so it puts them side by side instead of below the other. My code is as follows

@charset "UTF-8";
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: red;
  margin: 0;
  padding: 0; }

.Bienvenidos {
  background-color: red;
  /* Si se usa background nada mas, el background tapa el texto que se ponga encima de él */
  background-image: url("../images/negocios.png");
  background-size: cover;
  /*one image that ocuppy all the window*/
  /*min-width:33vw; /* this has to be used because background-size cover doesnt reach full page
  and if you put width only, it left a little space*/
  display: block;
  /*height:100vh;*/
  /*overflow:hidden; /*en el caso de que al poner un margen la imagen no cubra toda la pantalla*/ }

.clearfix:after {
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both; }

.Bienvenidos {
  /*position:relative;*/ }

.Encabezado {
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.9);
  /*position:absolute;
  left:0;
  top:0;
  z-index:0;*/ }

/*this part makes all the navbar go black and fixed-top makes it ocuppy all the window*/
.fixed-top {
  background: rgba(0, 0, 0, 0.7); }

.navbar-light .navbar-brand, .navbar-light .navbar-toggler {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem; }

.navbar-light .navbar-nav .open > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .nav-link.active {
  color: rgba(255, 255, 255, 0.9); }

.navbar-light .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5); }

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }

.navbar-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  text-align: center; }

.navbar-light .navbar-nav .open > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .nav-link.active {
  color: rgba(255, 255, 255, 0.9);
  background: red; }

.nav-item:hover {
  background: red; }

.active {
  margin-top: .2rem; }

.btn-secundary, .btn-secundary:hover {
  background-color: #ff4;
  color: white; }

.nav-item {
  /*margin:.2rem;*/ }

.texto-bienvenido {
  margin-top: 6rem; }

.btn-primary, .btn-primary:hover {
  color: #fff;
  background-color: red;
  border-color: black; }

.btn-primary, .btn-secundary {
  text-transform: Uppercase; }

.quienes-somos {
  color: #fff;
  background-color: blue;
  display: block;
  /*position:absolute;
  left:0;
  top:100vh; /*Debido a que por una extraña razon no se pudo realizar como en el video se tuvo que cambiar el position a absolute
  para que el siguiente section se encontrara abajo y no al lado, NOTA: no funciono clear:both y clearfix:after*/
  /*width:33vw;*/ }

.servicios {
  background-color: #ff8;
  color: white;
  display: block;
  /*position:absolute;
  left:0;*/
  /*width:33vw;
  /*top:256vh;*/ }

/*background-size:cover;   sirve para que la imagen llene todo su contenedor*/

/*# sourceMappingURL=estilos.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS que se descargo de la pagina y fue compilado con Koala-->
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">

</head>

<body>

  <section class="Bienvenidos">
    <div class="container">
      <header class="Encabezado">


        <!-- la imagen debe estar en la misma carpeta que el archivo.css-->

        <!-- para que lo que sigue despues del menu se quede fijo le agregamos la clase navbar-fixed-top-->
        <nav class="navbar fixed-top panel-default.affix navbar-expand-lg navbar-light bg-light">
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">   
    <span class="navbar-toggler-icon"></span>
  </button>
          <a class="navbar-brand" href="#!">Navbar</a>

          <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul class="navbar-nav mr-auto mt-2 mt-md-0">
              <!--ul class="menu_ext"-->
              <li class="nav-item active">
                <!-- active es para mostrar el valor que actualmente esta activo del menu-->
                <a class="nav-link" href="#!">Nosotros <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!">Servicios</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!">Portafolios</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!">Contactos</a>
              </li>
            </ul>
          </div>
        </nav>

      </header>

      <div class="texto-bienvenido text-center">
        <p class="h4">Bienvenidos a nuestro estudio.</p>
        <h1 class="display-3 mb-3">Encantado de conocerte.</h1>
        <a href="#" class="btn btn-primary btn-lg">Ponte en contacto.</a>
      </div>
    </div>

  </section>

  <section class="quienes-somos py-3">
    <div class="container text-center">

      <img src="images/persona.svg" alt="persona" class="img-fluid mt-3 mb-3 "></img>
      <h2 class="h1">¿Quienes somos?<br></h2>
      <p>Ponemos un servicio integral al alcance de tus necesidades, desde la parte de frontend hasta el backend de tu sitio web de manera que sea adaptable a cualquier dispositivo movil.</p>
      <a href="#" class="btn btn-secundary btn-lg mb-3">Más información.</a>

    </div>
  </section>

  <section class="servicios py-3 text-center">

    <div class="container">
      <h2 class="h1">Nuestros servicios<br></h2>

      <div class="row">
        <!-- si se usa col-* o con un tamaño especifico de pantalla la suma del numero de columnas totales no puede pasar de 12-->
        <div class="col-md-4">
          a
        </div>
        <div class="col-md-4">
          a
        </div>
        <div class="col-md-4">
          a
        </div>
      </div>


    </div>

  </section>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

</html>

For some reason, it does not appear all the code, I hope that they help me in that same way. The bootstrap version I use is the 4 alpha 6

html css bootstrap-4

asked by Guillermo Gómez Sánchez 04.10.2017 в 19:24

source

1 answer

Count number of rows by expressing in a report.rdlc? How to change the value by the option name of an HTML select tag?

score 0 · Answer 1

You have added the properties to the body

display: -webkit-box;
display: -ms-flexbox;
display: flex;

To show each section one below the other you have two options.

First option, adding property flex-direction :

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}

Second option, changing the value of display :

body {
    display: block;
}