locked
bootstrap in mvc RRS feed

  • Question

  • User1119553929 posted

    when i resize the browser the display has blank space on the left :-(

    How to float left?

    Txs


    @model IEnumerable<formatu.Cursos>


    <h3>
        Cursos a começar
    </h3>

    <div class="row">





    @foreach (var item in Model)

    {


        <div class="col-sm-6 col-md-6">
          

            <dl class="dl-horizontal">
                <dt>
                    @Html.DisplayNameFor(model => model.ID_Curso)
                </dt>

                <dd>
                    @Html.DisplayFor(model => item.ID_Curso)
                </dd>


                <dt>
                    @Html.DisplayNameFor(model => model.Curso)
                </dt>

                <dd>
                    @Html.DisplayFor(model => item.Curso)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Data_Início)
                </dt>

                <dd>
                    @Html.DisplayFor(model => item.Data_Início)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Preço)
                </dt>

                <dd>
                    @Html.DisplayFor(model => item.Preço)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Horas)
                </dt>

                <dd>
                    @Html.DisplayFor(model => item.Horas)
                </dd>


                <dt>
                    @Html.DisplayNameFor(model => model.Áreas.Área)
                </dt>

                <dd>
                    @Html.DisplayFor(model => item.Áreas.Área)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Entidades.Entidade_Formadora)
                </dt>

                <dd>
                    @Html.DisplayFor(model => item.Entidades.Entidade_Formadora)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Localidades.Localidade)
                </dt>

                <dd>
                    @Html.DisplayFor(model => item.Localidades.Localidade)
                </dd>

                <dt>
                    @Html.DisplayNameFor(model => model.Modalidades.Modalidade)
                </dt>

                <dd>
                    @Html.DisplayFor(model => item.Modalidades.Modalidade)
                </dd>

            </dl>

            @Html.ActionLink("Detalhes", "Details", new { Controller = "Cursos", id = item.ID_Curso }) |
            @Html.ActionLink("Estou Interessado", "Estou", new { Controller = "Interesses", id = item.ID_Curso })


        </div>


    }


    </div>

    Thursday, September 8, 2016 7:22 PM

Answers

  • User-2057865890 posted

    Hi zulurl,

    See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

    Extra small devices<small>Phones (<768px)</small> Small devices <small>Tablets (≥768px)</small> Medium devices<small>Desktops (≥992px)</small> Large devices <small>Desktops (≥1200px)</small>
    Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
    Container width None (auto) 750px 970px 1170px
    Class prefix
    .col-xs-
    .col-sm-
    .col-md-
    .col-lg-
    # of columns 12
    Column width Auto ~62px ~81px ~97px
    Gutter width 30px (15px on each side of a column)
    Nestable Yes
    Offsets Yes
    Column ordering Yes

    <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>

    reference:

    http://getbootstrap.com/css/ 

    Best Regards,

    Chris

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 9, 2016 11:10 AM