bootstrap in mvc[Answered] RSS

• • Reply
  zulurl

  Member

  1 Points

  114 Posts

  bootstrap in mvc

  Sep 08, 2016 07:22 PM|zulurl|LINK

  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>

• • Reply
  Chris Zhao

  All-Star

  17652 Points

  3510 Posts

  Re: bootstrap in mvc

  Sep 09, 2016 11:10 AM|Chris Zhao|LINK

  Hi zulurl,

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

  	Extra small devicesPhones (<768px)	Small devices Tablets (≥768px)	Medium devicesDesktops (≥992px)	Large devices Desktops (≥1200px)
  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