Question

我需要使两个列彼此相邻，而不是每个都放在下面。我以一定的空间将它们隔开，使它们彼此相邻。我已附上一张图片，所以您可以看到我的想法。对象B必须转到我标记为新位置的位置。

@model HomeIndexViewModel

@{
    ViewData["Title"] = "Home Page";

}

<div class="container">
    <p class="headerText">Most Recent Movies</p>
    <div class="row">
        <div class="col-lg-10 movieTitleText">
            @foreach (var movie in Model.Movies)
            {
                <div class="col-md-4 movieTitleText">
                    <div>
                        <img src="~/images/@movie.ImageUrl" alt="Visual Studio" class="img-fluid" style="width: 100%; height:100px;" />
                        <h4 class="">@movie.Name <span class="ratingInTitleToRight">☆@movie.Rating</span></h4>
                        <div class="genreTitleTag">@movie.Genre</div>
                        <div class="">@movie.Storyline</div>
                        <a asp-area="" asp-controller="Movie" asp-action="Watchlist" asp-route-id="@movie.Name" class="text-warning genreTitleTag">+ Add to Watchlist</a>
                    </div>
                    @*<partial name="_HomeMoviePartial" model="movie" />*@
                </div>
            }
        </div>
        <div class="col-lg-2">
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
        </div>
    </div>
</div>

https://i.imgur.com/Emtx7JW.png

Answer 1

找到答案了，您还需要一个答案，因为它需要将它们放入新的行中。

@model HomeIndexViewModel

@{
    ViewData["Title"] = "Home Page";

}

<div class="container">
    <p class="headerText">Most Recent Movies</p>
    <div class="row">
        <div class="col-lg-10 movieTitleText homeMovieList">
            <div class="row">
                @foreach (var movie in Model.Movies)
                {
                    <div class="col-lg-4 movieTitleText">
                        <div>
                            <img src="~/images/@movie.ImageUrl" alt="Visual Studio" class="img-fluid" style="width: 100%; height:100px;" />
                            <h4 class="">@movie.Name <span class="ratingInTitleToRight">☆@movie.Rating</span></h4>
                            <div class="genreTitleTag">@movie.Genre</div>
                            <div class="">@movie.Storyline</div>
                            <a asp-area="" asp-controller="Movie" asp-action="Watchlist" asp-route-id="@movie.Name" class="text-warning genreTitleTag">+ Add to Watchlist</a>
                        </div>
                        @*<partial name="_HomeMoviePartial" model="movie" />*@
                    </div>
                }
            </div>
        </div>
        <div class="col-lg-2">
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
            <div class="well">
                <p>Place FOR NEWS</p>
            </div>
        </div>
    </div>
</div>

在特定情况下，将两列彼此相邻放置

1 个答案: