web-tourist.net

Posted: **Sun Mar 22, 2020 11:47 am**

Привет,
използвам boostrap3 и искам да създам grids , който да не се влияе от нов ред (целта ми е да имам по 5 на ред, но самият framework не го позволява) - тези 5 grids да бъдат под декстоп.

Също така под мобилно устройство да бъдат по 2 на ред като да се нарушава структурата.

boostrap3.tar

Screenshot_2020-03-22 Bootstrap, from Twitter(2).png

Screenshot_2020-03-22 Bootstrap, from Twitter(1).png

Някой може ли да удари едно рамо? Принципно не е нерешимо , но поне да раздвижваме форума от към мнения и информация.

п.с. струва ми се, че е по-удачно да ползвам cols, вместо span?

Posted: **Sun Mar 22, 2020 11:53 am**

Не съм отварял файла, но никога не използвай span за създаване на grid. span не е елемент, който да се използва като контейнер. span е inline елемент и може да ти докара проблеми при неправилно използване.

Използвай си нормални div-ове със съответните cols.

Posted: **Sun Mar 22, 2020 11:58 am**

@Revelation, и аз така разсъждавам (дори по-горе) съм написал , че не ми се вижда добър вариант със span. Благодаря за съвета

Прилагам html-а

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a href="#" class="navbar-link">Username</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
    
    <div class="container-fluid">
        <div class="row-fuid">
            <div class="span10">
                <a class="brand" href="#">Project name</a>
            </div>
            <div class="span2">
                <a href="#">Link 1</a> | 
                <a href="#">Link 2</a>
            </div>
        </div>
    </div>
    <br />

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Sidebar</li>
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <div class="hero-unit">
            <h1>MAP</h1>
          </div>
          
          <div class="row-fluid" style="border: 1px solid #ddd">
            <div class="span2">
              <img src="http://placehold.jp/152x117.png" />
              <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
              10лв</p>
            </div><!--/span-->
            <div class="span2">
              <img src="http://placehold.jp/152x117.png" />
              <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
              10лв</p>
            </div><!--/span-->
            <div class="span2">
              <img src="http://placehold.jp/152x117.png" />
              <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
              10лв</p>
            </div><!--/span-->
            <div class="span2">
              <img src="http://placehold.jp/152x117.png" />
              <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
              10лв</p>
            </div><!--/span-->
            <div class="span2">
              <img src="http://placehold.jp/152x117.png" />
              <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
              10лв</p>
            </div><!--/span-->
            <div class="span2">
              <img src="http://placehold.jp/152x117.png" />
              <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
              10лв</p>
            </div><!--/span-->
            <div class="span2">
              <img src="http://placehold.jp/152x117.png" />
              <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
              10лв</p>
            </div><!--/span-->
            <div class="span2">
              <img src="http://placehold.jp/152x117.png" />
              <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
              10лв</p>
            </div><!--/span-->
          </div><!--/row-fluid-->
          
        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; Company</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>

Posted: **Sun Mar 22, 2020 3:05 pm**

Коригирах го и използвам div-ве.

Под десктоп е ОК, обаче под мобилни устройства "събира" div-те и е дразнещо.

Screenshot_2020-03-22 Bootstrap Example.png

Screenshot_2020-03-22 Bootstrap Example(1).png

Code: Select all


.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

html

Code: Select all


        <div class="row-fluid" style="border: 1px solid #ddd">
            <div class="col-md-5ths col-xs-6">
                      <img src="http://placehold.jp/152x117.png" />
                      <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
                      10лв</p>
            </div>
            <div class="col-md-5ths col-xs-6">
                      <img src="http://placehold.jp/152x117.png" />
                      <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
                      10лв</p>
            </div>
            <div class="col-md-5ths col-xs-6">
                      <img src="http://placehold.jp/152x117.png" />
                      <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
                      10лв</p>
            </div>
            <div class="col-md-5ths col-xs-6">
                      <img src="http://placehold.jp/152x117.png" />
                      <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
                      10лв</p>
            </div>
            <div class="col-md-5ths col-xs-6">
                      <img src="http://placehold.jp/152x117.png" />
                      <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
                      10лв</p>
            </div>
            <div class="col-md-5ths col-xs-6">
                      <img src="http://placehold.jp/152x117.png" />
                      <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
                      10лв</p>
            </div>
            <div class="col-md-5ths col-xs-6">
                      <img src="http://placehold.jp/152x117.png" />
                      <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
                      10лв</p>
            </div>
            <div class="col-md-5ths col-xs-6">
                      <img src="http://placehold.jp/152x117.png" />
                      <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
                      10лв</p>
            </div>
            <div class="col-md-5ths col-xs-6">
                      <img src="http://placehold.jp/152x117.png" />
                      <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
                      10лв</p>
            </div>
            <div class="col-md-5ths col-xs-6">
                      <img src="http://placehold.jp/152x117.png" />
                      <p><a href="#">от Иван Иванов... на преди 1 години </a><br />
                      10лв</p>
            </div>
            <div class="clearfix"></div>
        </div>

web-tourist.net

Boostrap 3 - проблем при използване на span

Boostrap 3 - проблем при използване на span

Re: Boostrap 3 - проблем при използване на span

Re: Boostrap 3 - проблем при използване на span

Re: Boostrap 3 - проблем при използване на span